优化积分流水筛选与用户管理样式
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{{--
|
||||
文件功能:用户个人积分流水日志页面
|
||||
用户可筛选查看自己的经验、金币、魅力变动历史,按日期倒序排列
|
||||
用户可筛选查看自己的经验、金币、魅力收入和支出变动历史,按日期倒序排列
|
||||
|
||||
@extends layouts.app
|
||||
--}}
|
||||
@@ -13,11 +13,25 @@
|
||||
@section('content')
|
||||
<main class="p-4 sm:p-6 lg:p-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
@php
|
||||
$selectedSourceCount = count($selectedSources ?? []);
|
||||
@endphp
|
||||
|
||||
{{-- 筛选栏 --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6 flex flex-wrap gap-3 items-center">
|
||||
<span class="text-gray-600 text-sm font-medium">筛选:</span>
|
||||
|
||||
{{-- 收支方向 --}}
|
||||
<div class="flex gap-2">
|
||||
@foreach(['' => '全部', 'income' => '收入', 'expense' => '支出'] as $val => $label)
|
||||
<a href="{{ route('currency.my-logs', array_merge(request()->query(), ['direction' => $val, 'days' => $days])) }}"
|
||||
class="px-3 py-1 rounded-full text-xs font-medium transition
|
||||
{{ ($direction ?? '') === $val ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-green-100' }}">
|
||||
{{ $label }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- 货币类型 --}}
|
||||
<div class="flex gap-2">
|
||||
@foreach(['' => '全部', 'exp' => '⚡ 经验', 'gold' => '💰 金币', 'charm' => '🌸 魅力'] as $val => $label)
|
||||
@@ -29,6 +43,41 @@
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- 来源筛选 --}}
|
||||
<form method="GET" action="{{ route('currency.my-logs') }}" class="relative">
|
||||
<input type="hidden" name="direction" value="{{ $direction ?? '' }}">
|
||||
<input type="hidden" name="currency" value="{{ $currency ?? '' }}">
|
||||
<input type="hidden" name="days" value="{{ $days }}">
|
||||
|
||||
<details class="relative">
|
||||
<summary class="list-none cursor-pointer select-none px-3 py-1 rounded-full text-xs font-medium transition bg-gray-100 text-gray-600 hover:bg-indigo-100">
|
||||
来源:{{ $selectedSourceCount > 0 ? '已选 '.$selectedSourceCount.' 项' : '全部' }} ▾
|
||||
</summary>
|
||||
|
||||
<div class="absolute left-0 z-20 mt-2 flex w-72 max-h-80 flex-col rounded-lg border border-gray-200 bg-white shadow-lg">
|
||||
<div class="grid max-h-60 gap-1 overflow-y-auto p-3">
|
||||
@foreach($sourceOptions as $sourceOption)
|
||||
<label class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-gray-600 hover:bg-gray-50">
|
||||
<input type="checkbox" name="sources[]" value="{{ $sourceOption->value }}"
|
||||
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
||||
@checked(in_array($sourceOption->value, $selectedSources ?? [], true))>
|
||||
<span class="truncate" title="{{ $sourceOption->label() }}">{{ $sourceOption->label() }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="sticky bottom-0 flex items-center justify-between border-t border-gray-100 bg-white px-3 py-3">
|
||||
<a href="{{ route('currency.my-logs', request()->except('sources')) }}"
|
||||
class="text-xs text-gray-400 hover:text-gray-600">清空来源</a>
|
||||
<button type="submit"
|
||||
class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700">
|
||||
应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</form>
|
||||
|
||||
{{-- 日期范围 --}}
|
||||
<div class="flex gap-2 ml-auto">
|
||||
@foreach([7 => '7 天', 14 => '14 天', 30 => '30 天'] as $d => $label)
|
||||
@@ -87,7 +136,8 @@
|
||||
<td class="px-4 py-3 text-right text-gray-500">
|
||||
{{ number_format($log->balance_after) }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-400 text-xs max-w-[160px] truncate">
|
||||
<td class="px-4 py-3 text-gray-400 text-xs max-w-[160px] truncate"
|
||||
title="{{ $log->remark ?: '—' }}">
|
||||
{{ $log->remark ?: '—' }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user