feat: add vip payment and member center

This commit is contained in:
2026-04-11 12:01:52 +08:00
parent db26820544
commit 746116d325
23 changed files with 1781 additions and 2 deletions
@@ -74,6 +74,10 @@
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.vip.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
{!! '👑 VIP 会员等级' !!}
</a>
<a href="{{ route('admin.vip-payment-logs.index') }}"
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.vip-payment-logs.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
{!! '🧾 会员购买日志' !!}
</a>
<a href="{{ route('admin.shop.index') }}"
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.shop.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
{!! '🛒 商店管理' !!}
@@ -111,6 +115,10 @@
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.smtp.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
📧 邮件 SMTP 配置
</a>
<a href="{{ route('admin.vip-payment.edit') }}"
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.vip-payment.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
💳 VIP 支付配置
</a>
<a href="{{ route('admin.ai-providers.index') }}"
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.ai-providers.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
🤖 AI 厂商配置
@@ -0,0 +1,116 @@
{{--
文件功能:后台会员购买日志页面
供后台管理员查询全站 VIP 购买订单,查看支付状态与会员开通情况
--}}
@extends('admin.layouts.app')
@section('title', '会员购买日志')
@section('content')
<div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm mb-6">
<form action="{{ route('admin.vip-payment-logs.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
<div class="flex-1 min-w-[140px]">
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">用户名</label>
<input type="text" name="username" value="{{ request('username') }}"
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
placeholder="支持模糊搜索">
</div>
<div class="flex-1 min-w-[140px]">
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">订单号/流水号</label>
<input type="text" name="order_no" value="{{ request('order_no') }}"
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
placeholder="本地单号 / 平台单号 / 第三方单号">
</div>
<div class="flex-1 min-w-[130px]">
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">订单状态</label>
<select name="status"
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
<option value="">全部状态</option>
@foreach ($statusOptions as $value => $label)
<option value="{{ $value }}" {{ request('status') === $value ? 'selected' : '' }}>{{ $label }}</option>
@endforeach
</select>
</div>
<div class="flex-none w-36">
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">开始日期</label>
<input type="date" name="date_start" value="{{ request('date_start') }}"
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
</div>
<div class="flex-none w-36">
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">结束日期</label>
<input type="date" name="date_end" value="{{ request('date_end') }}"
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
</div>
<div class="flex-none flex items-center space-x-2">
<button type="submit"
class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-5 rounded-lg shadow-sm transition text-sm">查询</button>
<a href="{{ route('admin.vip-payment-logs.index') }}"
class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg shadow-sm transition text-sm">重置</a>
</div>
</form>
</div>
<div class="bg-white rounded shadow overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse min-w-[1200px]">
<thead>
<tr class="bg-gray-50 text-gray-600 text-sm uppercase tracking-wider border-b border-gray-200">
<th class="px-6 py-4 font-semibold whitespace-nowrap">订单ID</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">用户</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">会员等级</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">本地订单号</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">平台支付单号</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">支付金额</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">状态</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">支付时间</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap">开通时间</th>
<th class="px-6 py-4 font-semibold whitespace-nowrap text-right">创建时间</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
@forelse ($logs as $log)
@php
$statusClass = match ($log->status) {
'paid' => 'bg-emerald-100 text-emerald-700',
'pending' => 'bg-amber-100 text-amber-700',
'closed' => 'bg-gray-100 text-gray-500',
'failed' => 'bg-rose-100 text-rose-700',
default => 'bg-slate-100 text-slate-700',
};
@endphp
<tr class="hover:bg-gray-50 transition cursor-default">
<td class="px-6 py-4 text-sm text-gray-500">#{{ $log->id }}</td>
<td class="px-6 py-4">
<div class="font-bold text-gray-800">{{ $log->user?->username ?? '未知用户' }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span style="color: {{ $log->vipLevel?->color ?: '#111827' }}">{{ $log->vipLevel?->icon ?: '👑' }}</span>
<span class="font-bold text-gray-800 ml-1">{{ $log->vip_name }}</span>
</td>
<td class="px-6 py-4 font-mono text-xs text-gray-600 whitespace-nowrap">{{ $log->order_no }}</td>
<td class="px-6 py-4 font-mono text-xs text-gray-600 whitespace-nowrap">{{ $log->payment_order_no ?: '-' }}</td>
<td class="px-6 py-4 font-bold text-rose-600 whitespace-nowrap">¥{{ number_format((float) $log->amount, 2) }}</td>
<td class="px-6 py-4 whitespace-nowrap"><span class="inline-flex px-2.5 py-1 rounded-full text-xs font-bold {{ $statusClass }}">{{ $statusOptions[$log->status] ?? $log->status }}</span></td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">{{ $log->paid_at?->format('Y-m-d H:i:s') ?? '未支付' }}</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">{{ $log->opened_vip_at?->format('Y-m-d H:i:s') ?? '未开通' }}</td>
<td class="px-6 py-4 text-sm text-gray-500 text-right whitespace-nowrap">{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
</tr>
@empty
<tr>
<td colspan="10" class="px-6 py-8 text-center text-gray-500">📭 暂无会员购买记录</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@if ($logs->hasPages())
<div class="px-6 py-4 border-t border-gray-200">{{ $logs->links() }}</div>
@endif
</div>
@endsection
@@ -0,0 +1,108 @@
{{--
文件功能:后台 VIP 支付配置页面
用于维护聊天室对接 NovaLink 支付中心所需的开关、地址与签名密钥
--}}
@extends('admin.layouts.app')
@section('title', 'VIP 支付配置')
@section('content')
@php
$enabled = $params['vip_payment_enabled'] ?? '0';
$syncReturnUrl = route('vip.payment.return');
$asyncNotifyUrl = route('vip.payment.notify');
@endphp
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50">
<div>
<h2 class="text-lg font-bold text-gray-800">VIP 在线支付配置</h2>
<p class="text-xs text-gray-500 mt-1">当前仅对接 NovaLink 支付中心,用于聊天室 VIP 会员购买。</p>
</div>
</div>
<div class="p-6">
<div class="mb-6 bg-indigo-50 border border-indigo-200 rounded-xl p-4 text-sm text-indigo-800">
<p class="font-bold">接入说明</p>
<p class="mt-1">请先在 NovaLink 支付系统中创建“接入应用”,再把该应用的地址、App Key App Secret 填入这里。</p>
</div>
<form action="{{ route('admin.vip-payment.update') }}" method="POST" class="space-y-6 max-w-3xl">
@csrf
@method('PUT')
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">{{ $descriptions['vip_payment_enabled'] }}</label>
<div class="flex items-center gap-6 text-sm text-gray-700">
<label class="inline-flex items-center gap-2">
<input type="radio" name="vip_payment_enabled" value="1" {{ old('vip_payment_enabled', $enabled) === '1' ? 'checked' : '' }}>
<span>开启</span>
</label>
<label class="inline-flex items-center gap-2">
<input type="radio" name="vip_payment_enabled" value="0" {{ old('vip_payment_enabled', $enabled) !== '1' ? 'checked' : '' }}>
<span>关闭</span>
</label>
</div>
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">{{ $descriptions['vip_payment_base_url'] }}</label>
<input type="text" name="vip_payment_base_url"
value="{{ old('vip_payment_base_url', $params['vip_payment_base_url'] ?? '') }}"
placeholder="https://novalink.test"
class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">{{ $descriptions['vip_payment_app_key'] }}</label>
<input type="text" name="vip_payment_app_key"
value="{{ old('vip_payment_app_key', $params['vip_payment_app_key'] ?? '') }}"
class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">{{ $descriptions['vip_payment_timeout'] }}</label>
<input type="number" name="vip_payment_timeout"
value="{{ old('vip_payment_timeout', $params['vip_payment_timeout'] ?? 10) }}"
min="3" max="30"
class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
</div>
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">{{ $descriptions['vip_payment_app_secret'] }}</label>
<input type="password" name="vip_payment_app_secret"
value="{{ old('vip_payment_app_secret', $params['vip_payment_app_secret'] ?? '') }}"
class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
<p class="mt-2 text-xs text-gray-500">该密钥仅用于服务器与支付中心之间的签名通信,请勿提供给前端。</p>
</div>
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm text-amber-900 space-y-4">
<div>
<p class="font-bold">系统回调说明</p>
<p class="mt-1">请把下面两个地址分别填写到 NovaLink 支付系统“编辑应用”的同步返回地址与异步通知地址中。</p>
</div>
<div>
<label class="block text-sm font-bold text-amber-900 mb-2">同步返回地址</label>
<input type="text" value="{{ $syncReturnUrl }}" readonly
onclick="this.select();"
class="w-full border-amber-200 rounded-md shadow-sm p-2.5 bg-white border text-gray-700 font-mono text-sm cursor-pointer">
</div>
<div>
<label class="block text-sm font-bold text-amber-900 mb-2">异步通知地址</label>
<input type="text" value="{{ $asyncNotifyUrl }}" readonly
onclick="this.select();"
class="w-full border-amber-200 rounded-md shadow-sm p-2.5 bg-white border text-gray-700 font-mono text-sm cursor-pointer">
</div>
</div>
<div class="pt-6 border-t flex gap-3">
<button type="submit"
class="px-6 py-2 bg-indigo-600 text-white rounded-md font-bold hover:bg-indigo-700 shadow-sm transition">保存配置</button>
</div>
</form>
</div>
</div>
@endsection
@@ -32,6 +32,7 @@
</div>
<div class="mobile-drawer-body">
<div class="mobile-tool-btn" onclick="closeMobileDrawer();openShopModal();">🛒<br>商店</div>
<div class="mobile-tool-btn" onclick="closeMobileDrawer();window.open('{{ route('vip.center') }}','_blank');">👑<br>会员</div>
<div class="mobile-tool-btn" onclick="closeMobileDrawer();saveExp();">💾<br>存点</div>
<div class="mobile-tool-btn" onclick="closeMobileDrawer();openGameHall();">🎮<br>娱乐</div>
<div class="mobile-tool-btn" onclick="closeMobileDrawer();openBankModal();">🏦<br>银行</div>
@@ -16,6 +16,7 @@
{{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
<div class="chat-toolbar" id="toolbar-strip">
<div class="tool-btn" onclick="openShopModal()" title="购买道具">商店</div>
<div class="tool-btn" onclick="window.open('{{ route('vip.center') }}', '_blank')" title="会员中心">会员</div>
<div class="tool-btn" onclick="saveExp()" title="手动存经验点">存点</div>
<div class="tool-btn" onclick="openGameHall()" title="娱乐游戏大厅">娱乐</div>
<div class="tool-btn" onclick="window.dispatchEvent(new CustomEvent('open-earn-panel'))" title="看视频赚金币">赚钱</div>
+31 -2
View File
@@ -74,6 +74,9 @@
// VIP 等级
$vipLevels = VipLevel::orderBy('sort_order')->get();
// VIP 在线支付开关
$vipPaymentEnabled = Sysparam::getValue('vip_payment_enabled', '0') === '1';
// 礼物列表
$gifts = Gift::activeList();
@@ -378,7 +381,8 @@
<th class="px-4 py-2 text-center">经验倍率</th>
<th class="px-4 py-2 text-center">金币倍率</th>
<th class="px-4 py-2 text-center">时长</th>
<th class="px-4 py-2 text-center rounded-tr-md">价格</th>
<th class="px-4 py-2 text-center">价格</th>
<th class="px-4 py-2 text-center rounded-tr-md">操作</th>
</tr>
</thead>
<tbody>
@@ -391,14 +395,39 @@
×{{ $vip->exp_multiplier }}</td>
<td class="px-4 py-2.5 text-center text-amber-600 font-bold">
×{{ $vip->jjb_multiplier }}</td>
<td class="px-4 py-2.5 text-center text-gray-600">{{ $vip->duration_days }} </td>
<td class="px-4 py-2.5 text-center text-gray-600">{{ $vip->duration_days > 0 ? $vip->duration_days . ' 天' : '永久' }}</td>
<td class="px-4 py-2.5 text-center text-rose-600 font-bold">
{{ $vip->price > 0 ? $vip->price . ' 元' : '免费' }}</td>
<td class="px-4 py-2.5 text-center">
@php
$isCurrentVipLevel = auth()->user()?->isVip() && (int) auth()->user()?->vip_level_id === (int) $vip->id;
@endphp
@if ($vip->price > 0 && $vipPaymentEnabled)
<form action="{{ route('vip.payment.store') }}" method="POST"
onsubmit="return confirm('确认支付 {{ $vip->price }} 元购买【{{ $vip->name }}】吗?');">
@csrf
<input type="hidden" name="vip_level_id" value="{{ $vip->id }}">
<button type="submit"
class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-bold hover:bg-indigo-700 transition">
{{ $isCurrentVipLevel ? '立即续费' : '立即购买' }}
</button>
</form>
@elseif ($vip->price > 0)
<span class="inline-flex px-3 py-1.5 rounded-lg bg-gray-100 text-gray-500 text-xs font-bold">暂未开启</span>
@else
<span class="inline-flex px-3 py-1.5 rounded-lg bg-emerald-100 text-emerald-700 text-xs font-bold">联系管理员</span>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="mt-4 rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-xs text-indigo-700">
VIP 会员支付由平台支付中心提供,最终开通结果以异步回调为准。
</div>
</section>
@endif
+201
View File
@@ -0,0 +1,201 @@
{{--
文件功能:前台会员中心页面
展示当前用户会员状态、会员等级权益、购买入口以及用户自己的会员购买记录
--}}
@extends('layouts.app')
@section('title', '会员中心 - 飘落流星')
@section('nav-icon', '👑')
@section('nav-title', '会员中心')
@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 bg-white rounded-3xl border border-amber-100 shadow-sm p-6">
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-sm font-bold text-amber-600">我的会员状态</p>
<h2 class="mt-2 text-2xl font-extrabold text-gray-900">
@if ($user->isVip())
{{ $user->vipName() ?: '尊贵会员' }}
@else
普通用户
@endif
</h2>
<p class="mt-3 text-sm text-gray-500">
@if ($user->isVip())
当前已开通会员权益,
@if ($user->hy_time)
到期时间:{{ $user->hy_time->format('Y-m-d H:i') }}
@else
当前为永久会员
@endif
@else
你当前还未开通会员,开通后可享受经验加成、金币加成和专属身份展示。
@endif
</p>
</div>
<div class="shrink-0 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 text-white px-5 py-4 text-center min-w-[120px]">
<div class="text-sm opacity-90">当前徽章</div>
<div class="mt-2 text-3xl">{{ $user->vipIcon() ?: '⭐' }}</div>
</div>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-4">
<div class="text-xs font-bold text-indigo-500 uppercase tracking-wider">经验倍率</div>
<div class="mt-2 text-2xl font-extrabold text-indigo-900">×{{ $user->vipLevel?->exp_multiplier ?? 1 }}</div>
</div>
<div class="rounded-2xl bg-amber-50 border border-amber-100 p-4">
<div class="text-xs font-bold text-amber-500 uppercase tracking-wider">金币倍率</div>
<div class="mt-2 text-2xl font-extrabold text-amber-900">×{{ $user->vipLevel?->jjb_multiplier ?? 1 }}</div>
</div>
<div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4">
<div class="text-xs font-bold text-emerald-500 uppercase tracking-wider">累计已支付</div>
<div class="mt-2 text-2xl font-extrabold text-emerald-900">¥{{ number_format($totalAmount, 2) }}</div>
<div class="mt-1 text-xs text-emerald-700">成功订单 {{ $paidOrders }} </div>
</div>
</div>
</div>
<div class="bg-slate-900 text-white rounded-3xl shadow-sm p-6">
<p class="text-sm font-bold text-amber-300">会员权益总览</p>
<ul class="mt-4 space-y-3 text-sm text-slate-200">
<li class="flex items-start gap-2"><span></span><span>挂机经验按会员倍率加成,升级更快。</span></li>
<li class="flex items-start gap-2"><span>💰</span><span>金币收益按会员倍率加成,参与玩法更轻松。</span></li>
<li class="flex items-start gap-2"><span>👑</span><span>昵称旁展示专属会员图标与会员名称。</span></li>
<li class="flex items-start gap-2"><span></span><span>可使用会员专属进场欢迎语与离场提示语。</span></li>
</ul>
<div class="mt-6 rounded-2xl bg-white/10 border border-white/10 px-4 py-3 text-xs text-slate-200">
会员支付由平台支付中心统一处理,最终是否开通以异步回调结果为准。
</div>
</div>
</section>
<section class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
<div class="flex items-center justify-between gap-4 mb-5">
<div>
<h3 class="text-xl font-extrabold text-gray-900">会员等级列表</h3>
<p class="mt-1 text-sm text-gray-500">不同档位提供不同倍率与时长,你可以按需要购买或续费。</p>
</div>
@if (! $vipPaymentEnabled)
<span class="inline-flex px-3 py-2 rounded-xl bg-gray-100 text-gray-500 text-sm font-bold">支付暂未开启</span>
@endif
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
@foreach ($vipLevels as $vip)
@php
$isCurrentVipLevel = $user->isVip() && (int) $user->vip_level_id === (int) $vip->id;
@endphp
<div class="rounded-3xl border {{ $isCurrentVipLevel ? 'border-amber-300 bg-amber-50/60' : 'border-gray-100 bg-white' }} shadow-sm p-5 flex flex-col">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-2xl bg-white border border-gray-100 flex items-center justify-center text-2xl shadow-sm">{{ $vip->icon }}</div>
<div>
<h4 class="text-lg font-extrabold" style="color: {{ $vip->color ?: '#111827' }}">{{ $vip->name }}</h4>
<p class="text-xs text-gray-500">当前已有 {{ $vip->users_count }} 位用户使用</p>
</div>
</div>
@if ($isCurrentVipLevel)
<span class="inline-flex px-2.5 py-1 rounded-full bg-amber-500 text-white text-xs font-bold">当前等级</span>
@endif
</div>
<div class="mt-5 grid grid-cols-2 gap-3 text-sm">
<div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-3">
<div class="text-xs text-indigo-500 font-bold">经验倍率</div>
<div class="mt-1 text-xl font-extrabold text-indigo-900">×{{ $vip->exp_multiplier }}</div>
</div>
<div class="rounded-2xl bg-amber-50 border border-amber-100 p-3">
<div class="text-xs text-amber-500 font-bold">金币倍率</div>
<div class="mt-1 text-xl font-extrabold text-amber-900">×{{ $vip->jjb_multiplier }}</div>
</div>
</div>
<div class="mt-4 space-y-2 text-sm text-gray-600 flex-1">
<div class="flex items-center justify-between"><span>有效时长</span><span class="font-bold text-gray-900">{{ $vip->duration_days > 0 ? $vip->duration_days . ' 天' : '永久' }}</span></div>
<div class="flex items-center justify-between"><span>支付金额</span><span class="font-bold text-rose-600">{{ $vip->price > 0 ? '¥' . $vip->price : '联系管理员' }}</span></div>
</div>
<div class="mt-5">
@if ($vip->price > 0 && $vipPaymentEnabled)
<form action="{{ route('vip.payment.store') }}" method="POST"
onsubmit="return confirm('确认支付 {{ $vip->price }} 元购买【{{ $vip->name }}】吗?');">
@csrf
<input type="hidden" name="vip_level_id" value="{{ $vip->id }}">
<button type="submit" class="w-full py-3 rounded-2xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition shadow-sm">
{{ $isCurrentVipLevel ? '立即续费' : '立即购买' }}
</button>
</form>
@elseif ($vip->price > 0)
<div class="w-full py-3 rounded-2xl bg-gray-100 text-gray-500 text-center font-bold">支付暂未开启</div>
@else
<div class="w-full py-3 rounded-2xl bg-emerald-100 text-emerald-700 text-center font-bold">请联系管理员开通</div>
@endif
</div>
</div>
@endforeach
</div>
</section>
<section class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
<div class="flex items-center justify-between gap-4 mb-5">
<div>
<h3 class="text-xl font-extrabold text-gray-900">我的购买记录</h3>
<p class="mt-1 text-sm text-gray-500">这里只显示你自己的会员订单记录,方便查看支付和开通状态。</p>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm min-w-[860px]">
<thead>
<tr class="bg-slate-50 text-slate-600">
<th class="px-4 py-3 text-left font-bold rounded-tl-2xl">本地订单号</th>
<th class="px-4 py-3 text-left font-bold">会员等级</th>
<th class="px-4 py-3 text-center font-bold">金额</th>
<th class="px-4 py-3 text-center font-bold">状态</th>
<th class="px-4 py-3 text-center font-bold">支付时间</th>
<th class="px-4 py-3 text-center font-bold rounded-tr-2xl">开通时间</th>
</tr>
</thead>
<tbody>
@forelse ($paymentLogs as $log)
@php
$statusMap = [
'created' => ['text' => '待创建', 'class' => 'bg-slate-100 text-slate-700'],
'pending' => ['text' => '待支付', 'class' => 'bg-amber-100 text-amber-700'],
'paid' => ['text' => '已支付', 'class' => 'bg-emerald-100 text-emerald-700'],
'closed' => ['text' => '已关闭', 'class' => 'bg-gray-100 text-gray-500'],
'failed' => ['text' => '失败', 'class' => 'bg-rose-100 text-rose-700'],
];
$status = $statusMap[$log->status] ?? ['text' => $log->status, 'class' => 'bg-slate-100 text-slate-700'];
@endphp
<tr class="border-t border-gray-100 hover:bg-slate-50/80">
<td class="px-4 py-3 font-mono text-xs text-gray-600">{{ $log->order_no }}</td>
<td class="px-4 py-3">
<div class="flex items-center gap-2">
<span style="color: {{ $log->vipLevel?->color ?: '#111827' }}">{{ $log->vipLevel?->icon ?: '👑' }}</span>
<span class="font-bold text-gray-900">{{ $log->vip_name }}</span>
</div>
</td>
<td class="px-4 py-3 text-center font-bold text-rose-600">¥{{ number_format((float) $log->amount, 2) }}</td>
<td class="px-4 py-3 text-center"><span class="inline-flex px-2.5 py-1 rounded-full text-xs font-bold {{ $status['class'] }}">{{ $status['text'] }}</span></td>
<td class="px-4 py-3 text-center text-gray-500">{{ $log->paid_at?->format('Y-m-d H:i') ?? '未支付' }}</td>
<td class="px-4 py-3 text-center text-gray-500">{{ $log->opened_vip_at?->format('Y-m-d H:i') ?? '未开通' }}</td>
</tr>
@empty
<tr>
<td colspan="6" class="px-4 py-12 text-center text-gray-400">暂无会员购买记录,开通后会显示在这里。</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@if ($paymentLogs->hasPages())
<div class="mt-5">{{ $paymentLogs->links() }}</div>
@endif
</section>
</div>
@endsection