如何使我的搜索输入正常工作？
How can I make my search input to work properly?
我是网络开发的新手，我正在开发一个使用 TALL 堆栈的项目：
- Laravel 混合;
- Livewire;
- AlpineJS 和;
- TailwindCSS.
只有当我查找 table 中存在的内容时，我的搜索输入才能正常工作，因为如果它不存在，包含它的 div 中存在的所有内容都会被删除，包括输入本身。
我已经尝试将它移动到 table div，但是 table 并且它仍在被删除。
这是后端代码：
class DepositTransactionsTableManager extends Component {
use WithPagination;
public $generic_search = '';
/**
* Get the current user of the application.
*
* @return mixed
*/
public function render() {
$term = $this->generic_search;
$transactions = $this->getUserProperty()->invoiceCrypto()->where(function($q) {
$q->orWhereNotNull("return_url");
})->whereIn("type", ['deposit'])->where("amount", "<>", 0);
if ($term != '') {
$transactions = $transactions->where(function($q) use($term) {
$q->orWhere("address", "like", "%$term%");
$q->orWhere("created_at", "like", "%$term%");
$q->orWhere("txid", "like", "%$term%");
})->orderBy("id", "desc")->paginate(10);
} else {
$transactions = $transactions->orderBy("id", "desc")->paginate(10);
}
$this->wallet = $this->getUserProperty()->wallet()->join('coins', 'wallets.short_name', '=', 'coins.short_name')->get(['wallets.*', 'wallets.id as wallet_id', 'coins.*']);
return view('livewire.deposit-transactions-table-manager', ['transactions' => $transactions]);
}
前端代码：
<div>
<div class="flex flex-col space-y-6">
<x-slot name="responsive-title">
@push('firstTitle')
<svg ...></svg>
<span class="ml-4 text-tiny font-medium text-letscrypto-green">{{__("Merchant")}}</span>
@endpush
@push('secondTitle')
<svg ...><span class="ml-4 text-tiny font-medium text-letscrypto-green">{{__("Deposits")}}</span>
@endpush
</x-slot>
<div class="hidden md:flex relative overflow-hidden px-4 py-6 mb-6 bg-low-white rounded-xl">
<svg ...></svg>
<div class="flex-shrink-0 text-center mx-auto w-full max-w-xs md:max-w-sm lg:max-w-2xl">
<h3 class="text-left text-2xl sm:text-4xl xl:text-5xl font-light text-letscrypto-green-lighter">
{{__("Deposits")}}
</h3>
<p class="mt-2 text-left text-xs md:text-sm lg:text-md text-gray-300">
{{__("Merchant Deposit Breadcrumbs 1")}}
<span class="text-letscrypto-green">{{__("Merchant Deposit Breadcrumbs 2")}}</span>.
</p>
<x-subtitle />
</div>
</div>
@if(count($transactions)>0)
<div class="block lg:hidden">
@if($merchant==1)
<div class="w-full block lg:hidden" style="height: 70px;">
<div class="min-w-2 w-1\/2" style="width: 100%; float: left;">
<div class="relative rounded-md mt-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg ...></svg>
</div>
<input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
</div>
</div>
</div>
@endif
<div>
@foreach($transactions as $item)
<div class="tile-list-wrapper flex flex-col md:hidden w-full space-y-2 px-4 py-5 bg-letscrypto-extradark border-b border-opacity-20 border-white">
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Currency")}}</span>
<img class="mr-2 rounded-full h-9 w-9" src="{{asset('/assets/images/icons/currencies')}}/{{Str::upper($item->cripto_short_name)}}.png" alt="">
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Date")}}</span>
<div class="inline-flex items-center">
<div class="flex flex-col text-sm font-medium text-gray-600 whitespace-nowrap items-end">
<span>{{formatedDate($item->created_at)}}</span>
<span>{{formatedHour($item->created_at)}}</span>
</div>
</div>
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("E-mail")}}</span>
<span class="text-sm font-medium text-gray-600 w-48 break-words text-right">{{$item->external_user_email}}</span>
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Address")}}</span>
<span class="text-sm font-medium text-gray-600 w-48 break-words text-right">{{$item->getCleanAddress()}}</span>
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Currency")}}/{{__("Operation")}}</span>
@if($item->type=='deposit')
<div style="height: 42px;" class="flex flex-col justify-between items-end">
<span class="text-sm font-medium text-letscrypto-primary whitespace-nowrap capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</span>
<span class="px-2 text-xs font-bold capitalize text-letscrypto-green-lighter bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
</div>
@else
<div style="height: 42px;" class="flex flex-col justify-between items-end">
<span class="text-sm font-medium text-letscrypto-red whitespace-nowrap capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</span>
<span class="px-2 text-xs font-bold text-red-500 capitalize bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
</div>
@endif
</div>
<div class="w-full pt-4 inline-flex justify-end">
@if(is_null($item->txid))
<button type="button" class="group inline-flex items-center px-6 py-0.5 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-low-white bg-opacity-25 text-yellow-300 hover:text-yellow-200 transition duration-200 focus:outline-none">
<div class="relative inline-block text-left">
<svg ...></svg>
</div>
{{__("Pending")}}
</button>
@else
<button type="button" class="group inline-flex items-center px-6 py-0.5 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-letscrypto-green-light hover:text-letscrypto-green-lighter bg-low-white bg-opacity-25 transition duration-200 focus:outline-none">
<div class="relative inline-block text-left">
<svg ...></svg>
</div>
{{__("Confirmed")}}
</button>
@endif
</div>
</div>
@endforeach
</div>
{{ $transactions->links() }}
</div>
@endif
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@if(count($transactions)>0)
@if($merchant==1)
<div class="w-full hidden lg:block" style="height: 70px;">
<div class="min-w-2 w-1\/2" style="width: 33.3%; float: left;">
<div class="relative rounded-md mt-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
</svg>
</div>
<input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
</div>
</div>
</div>
@endif
<div class="hidden md:flex flex-col border border-transparent sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-500 divide-opacity-25">
<thead>
<tr>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Currency")}}/{{__("Date")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("E-mail")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Address")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Currency")}}/{{__("Operation")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Status")}}
</th>
</tr>
</thead>
<tbody class="bg-letscrypto-extradark">
@foreach($transactions as $item)
<tr wire:click="showDetails('{{ $item->p_uuid }}')" class="hover:bg-letscrypto-dark cursor-pointer">
<td class="px-6 py-4">
<div class="flex items-center justify-center">
<div class="flex items-center flex-shrink-0 w-10 h-10">
<img class="mr-4 rounded-full h-9 w-9" src="{{asset('/assets/images/icons/currencies')}}/{{Str::upper($item->cripto_short_name)}}.png" alt="">
</div>
<div class="flex flex-col items-center ml-4">
<div class="text-sm font-medium text-left text-gray-300">
{{formatedDate($item->created_at)}}
</div>
<div class="inline-flex items-center w-full text-xs text-left text-gray-500">
<svg ...></svg>
{{formatedHour($item->created_at)}}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
{{$item->external_user_email}}
</td>
<td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
{{$item->getCleanAddress()}}
</td>
<td class="px-6 py-4 text-center whitespace-nowrap">
<p class="text-xs font-semibold text-letscrypto-primary capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</p>
<span class="px-2 text-xs font-bold capitalize text-letscrypto-green-lighter bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
</td>
<td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
@if(is_null($item->txid))
<button ...>
<svg ...></svg>
</div>
{{__("Pending")}}
</button>
@else
<button ...>
<svg ...></svg>
</div>
{{__("Confirmed")}}
</button>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $transactions->links() }}
</div>
@endif
</div>
</div>
</div>
<x-jet-dialog-modal wire:model="showModalDetails">
<x-slot name="title"></x-slot>
<x-slot name="content">
<div>
@if($type=='deposit')
<div class="flex items-center justify-center w-16 h-16 mx-auto bg-letscrypto-green-light bg-opacity-25 rounded-full animate-pulse">
<svg ...></svg>
</div>
@else
<div class="flex items-center justify-center w-16 h-16 mx-auto bg-letscrypto-green-light bg-opacity-25 rounded-full animate-pulse">
<svg ..."></svg>
</div>
@endif
<div class="text-left">
<div>
<div class="overflow-hidden sm:rounded-lg">
<div class="mt-3 mb-5 text-center">
<h3 class="text-normal font-medium leading-6 text-white">
@if($type=='deposit')
{{__("Received Transaction")}}
@else
{{__("Transaction Sent")}}
@endif
</h3>
<p class="max-w-2xl mt-2 text-sm text-gray-500">
@if($type=='deposit')
{{__("Check below the details of the payment received")}}
@else
{{__("Check the details of the payment sent below")}}
@endif
</p>
</div>
<div class="border-t border-gray-800">
<dl>
<div class="px-4 py-5 bg-letscrypto-dark sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Blockchain Transaction")}}
</dt>
<dd class="mt-1 self-center text-sm break-all sm:mt-0 sm:col-span-2 text-letscrypto-green">
<div id="link">{{$txId}}</div>
</dd>
</div>
<div class="px-4 py-5 bg-letscrypto-dark sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Address")}}
</dt>
<dd class="mt-1 self-center text-sm break-all sm:mt-0 sm:col-span-2 text-letscrypto-green">
{{$address}}
</dd>
</div>
<div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Gross amount")}}
</dt>
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>{{$total}} {{$symbol}} </b>
</dd>
</div>
<div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Fee")}}
</dt>
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>{{$tax}} {{$symbol}} </b>
</dd>
</div>
<div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Payment value")}}
</dt>
@if($type=='deposit')
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>+{{$amount}} {{$symbol}} </b>
</dd>
@else
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>{{$amount}} {{$symbol}} </b>
</dd>
@endif
</div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 bg-letscrypto-extradark">
<dd class="self-center text-sm text-letscrypto-green sm:col-span-2 md:col-span-3">
@if($symbol=="eth" || $symbol=="dby" )
<a href="{{$txIdLink}}" target="_blank" class="...">{{__("View on Etherscan")}}</a>
@else
<a href="{{$txIdLink}}" target="_blank" class="...">{{__("View on Blockchain")}}</a>
@endif
@if($type=='withdrawn')
<button type="button" data-clipboard-text="{{ $txId }}" class="...>
{{__("Copy Proof Link")}}
<svg ....>
</svg>
<svg ...
</svg>
</button>
@endif
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</x-slot>
<x-slot name="footer"></x-slot>
@push('scripts')
<script>
var clipboardButton = new ClipboardJS('.copy-button');
clipboardButton.on('success', function(e) {
...
</script>
@endpush
</x-jet-dialog-modal>
</div>
提前致谢。
您的搜索字段在条件中：
@if (count($transactions) > 0)
因此，如果您没有 $transactions，则不会显示 @if 指令中的所有内容。您需要将搜索字段移到 @if 之外。您可能想将其移到 @if.
上方
我假设 @if ($merchant == 1) 应该包装您的搜索输入：
@if($merchant==1)
<div class="w-full hidden lg:block" style="height: 70px;">
<div class="min-w-2 w-1\/2" style="width: 33.3%; float: left;">
<div class="relative rounded-md mt-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="..." /></svg>
</div>
<input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
</div>
</div>
</div>
@endif
@if (count($transactions) > 0)
...
@endif
我是网络开发的新手，我正在开发一个使用 TALL 堆栈的项目：
- Laravel 混合;
- Livewire;
- AlpineJS 和;
- TailwindCSS.
只有当我查找 table 中存在的内容时，我的搜索输入才能正常工作，因为如果它不存在，包含它的 div 中存在的所有内容都会被删除，包括输入本身。
我已经尝试将它移动到 table div，但是 table 并且它仍在被删除。
这是后端代码：
class DepositTransactionsTableManager extends Component {
use WithPagination;
public $generic_search = '';
/**
* Get the current user of the application.
*
* @return mixed
*/
public function render() {
$term = $this->generic_search;
$transactions = $this->getUserProperty()->invoiceCrypto()->where(function($q) {
$q->orWhereNotNull("return_url");
})->whereIn("type", ['deposit'])->where("amount", "<>", 0);
if ($term != '') {
$transactions = $transactions->where(function($q) use($term) {
$q->orWhere("address", "like", "%$term%");
$q->orWhere("created_at", "like", "%$term%");
$q->orWhere("txid", "like", "%$term%");
})->orderBy("id", "desc")->paginate(10);
} else {
$transactions = $transactions->orderBy("id", "desc")->paginate(10);
}
$this->wallet = $this->getUserProperty()->wallet()->join('coins', 'wallets.short_name', '=', 'coins.short_name')->get(['wallets.*', 'wallets.id as wallet_id', 'coins.*']);
return view('livewire.deposit-transactions-table-manager', ['transactions' => $transactions]);
}
前端代码：
<div>
<div class="flex flex-col space-y-6">
<x-slot name="responsive-title">
@push('firstTitle')
<svg ...></svg>
<span class="ml-4 text-tiny font-medium text-letscrypto-green">{{__("Merchant")}}</span>
@endpush
@push('secondTitle')
<svg ...><span class="ml-4 text-tiny font-medium text-letscrypto-green">{{__("Deposits")}}</span>
@endpush
</x-slot>
<div class="hidden md:flex relative overflow-hidden px-4 py-6 mb-6 bg-low-white rounded-xl">
<svg ...></svg>
<div class="flex-shrink-0 text-center mx-auto w-full max-w-xs md:max-w-sm lg:max-w-2xl">
<h3 class="text-left text-2xl sm:text-4xl xl:text-5xl font-light text-letscrypto-green-lighter">
{{__("Deposits")}}
</h3>
<p class="mt-2 text-left text-xs md:text-sm lg:text-md text-gray-300">
{{__("Merchant Deposit Breadcrumbs 1")}}
<span class="text-letscrypto-green">{{__("Merchant Deposit Breadcrumbs 2")}}</span>.
</p>
<x-subtitle />
</div>
</div>
@if(count($transactions)>0)
<div class="block lg:hidden">
@if($merchant==1)
<div class="w-full block lg:hidden" style="height: 70px;">
<div class="min-w-2 w-1\/2" style="width: 100%; float: left;">
<div class="relative rounded-md mt-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg ...></svg>
</div>
<input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
</div>
</div>
</div>
@endif
<div>
@foreach($transactions as $item)
<div class="tile-list-wrapper flex flex-col md:hidden w-full space-y-2 px-4 py-5 bg-letscrypto-extradark border-b border-opacity-20 border-white">
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Currency")}}</span>
<img class="mr-2 rounded-full h-9 w-9" src="{{asset('/assets/images/icons/currencies')}}/{{Str::upper($item->cripto_short_name)}}.png" alt="">
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Date")}}</span>
<div class="inline-flex items-center">
<div class="flex flex-col text-sm font-medium text-gray-600 whitespace-nowrap items-end">
<span>{{formatedDate($item->created_at)}}</span>
<span>{{formatedHour($item->created_at)}}</span>
</div>
</div>
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("E-mail")}}</span>
<span class="text-sm font-medium text-gray-600 w-48 break-words text-right">{{$item->external_user_email}}</span>
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Address")}}</span>
<span class="text-sm font-medium text-gray-600 w-48 break-words text-right">{{$item->getCleanAddress()}}</span>
</div>
<div class="w-full inline-flex justify-between items-center">
<span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Currency")}}/{{__("Operation")}}</span>
@if($item->type=='deposit')
<div style="height: 42px;" class="flex flex-col justify-between items-end">
<span class="text-sm font-medium text-letscrypto-primary whitespace-nowrap capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</span>
<span class="px-2 text-xs font-bold capitalize text-letscrypto-green-lighter bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
</div>
@else
<div style="height: 42px;" class="flex flex-col justify-between items-end">
<span class="text-sm font-medium text-letscrypto-red whitespace-nowrap capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</span>
<span class="px-2 text-xs font-bold text-red-500 capitalize bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
</div>
@endif
</div>
<div class="w-full pt-4 inline-flex justify-end">
@if(is_null($item->txid))
<button type="button" class="group inline-flex items-center px-6 py-0.5 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-low-white bg-opacity-25 text-yellow-300 hover:text-yellow-200 transition duration-200 focus:outline-none">
<div class="relative inline-block text-left">
<svg ...></svg>
</div>
{{__("Pending")}}
</button>
@else
<button type="button" class="group inline-flex items-center px-6 py-0.5 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-letscrypto-green-light hover:text-letscrypto-green-lighter bg-low-white bg-opacity-25 transition duration-200 focus:outline-none">
<div class="relative inline-block text-left">
<svg ...></svg>
</div>
{{__("Confirmed")}}
</button>
@endif
</div>
</div>
@endforeach
</div>
{{ $transactions->links() }}
</div>
@endif
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@if(count($transactions)>0)
@if($merchant==1)
<div class="w-full hidden lg:block" style="height: 70px;">
<div class="min-w-2 w-1\/2" style="width: 33.3%; float: left;">
<div class="relative rounded-md mt-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
</svg>
</div>
<input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
</div>
</div>
</div>
@endif
<div class="hidden md:flex flex-col border border-transparent sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-500 divide-opacity-25">
<thead>
<tr>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Currency")}}/{{__("Date")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("E-mail")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Address")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Currency")}}/{{__("Operation")}}
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
{{__("Status")}}
</th>
</tr>
</thead>
<tbody class="bg-letscrypto-extradark">
@foreach($transactions as $item)
<tr wire:click="showDetails('{{ $item->p_uuid }}')" class="hover:bg-letscrypto-dark cursor-pointer">
<td class="px-6 py-4">
<div class="flex items-center justify-center">
<div class="flex items-center flex-shrink-0 w-10 h-10">
<img class="mr-4 rounded-full h-9 w-9" src="{{asset('/assets/images/icons/currencies')}}/{{Str::upper($item->cripto_short_name)}}.png" alt="">
</div>
<div class="flex flex-col items-center ml-4">
<div class="text-sm font-medium text-left text-gray-300">
{{formatedDate($item->created_at)}}
</div>
<div class="inline-flex items-center w-full text-xs text-left text-gray-500">
<svg ...></svg>
{{formatedHour($item->created_at)}}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
{{$item->external_user_email}}
</td>
<td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
{{$item->getCleanAddress()}}
</td>
<td class="px-6 py-4 text-center whitespace-nowrap">
<p class="text-xs font-semibold text-letscrypto-primary capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</p>
<span class="px-2 text-xs font-bold capitalize text-letscrypto-green-lighter bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
</td>
<td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
@if(is_null($item->txid))
<button ...>
<svg ...></svg>
</div>
{{__("Pending")}}
</button>
@else
<button ...>
<svg ...></svg>
</div>
{{__("Confirmed")}}
</button>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $transactions->links() }}
</div>
@endif
</div>
</div>
</div>
<x-jet-dialog-modal wire:model="showModalDetails">
<x-slot name="title"></x-slot>
<x-slot name="content">
<div>
@if($type=='deposit')
<div class="flex items-center justify-center w-16 h-16 mx-auto bg-letscrypto-green-light bg-opacity-25 rounded-full animate-pulse">
<svg ...></svg>
</div>
@else
<div class="flex items-center justify-center w-16 h-16 mx-auto bg-letscrypto-green-light bg-opacity-25 rounded-full animate-pulse">
<svg ..."></svg>
</div>
@endif
<div class="text-left">
<div>
<div class="overflow-hidden sm:rounded-lg">
<div class="mt-3 mb-5 text-center">
<h3 class="text-normal font-medium leading-6 text-white">
@if($type=='deposit')
{{__("Received Transaction")}}
@else
{{__("Transaction Sent")}}
@endif
</h3>
<p class="max-w-2xl mt-2 text-sm text-gray-500">
@if($type=='deposit')
{{__("Check below the details of the payment received")}}
@else
{{__("Check the details of the payment sent below")}}
@endif
</p>
</div>
<div class="border-t border-gray-800">
<dl>
<div class="px-4 py-5 bg-letscrypto-dark sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Blockchain Transaction")}}
</dt>
<dd class="mt-1 self-center text-sm break-all sm:mt-0 sm:col-span-2 text-letscrypto-green">
<div id="link">{{$txId}}</div>
</dd>
</div>
<div class="px-4 py-5 bg-letscrypto-dark sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Address")}}
</dt>
<dd class="mt-1 self-center text-sm break-all sm:mt-0 sm:col-span-2 text-letscrypto-green">
{{$address}}
</dd>
</div>
<div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Gross amount")}}
</dt>
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>{{$total}} {{$symbol}} </b>
</dd>
</div>
<div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Fee")}}
</dt>
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>{{$tax}} {{$symbol}} </b>
</dd>
</div>
<div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm self-center font-medium text-gray-500">
{{__("Payment value")}}
</dt>
@if($type=='deposit')
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>+{{$amount}} {{$symbol}} </b>
</dd>
@else
<dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
<b>{{$amount}} {{$symbol}} </b>
</dd>
@endif
</div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 bg-letscrypto-extradark">
<dd class="self-center text-sm text-letscrypto-green sm:col-span-2 md:col-span-3">
@if($symbol=="eth" || $symbol=="dby" )
<a href="{{$txIdLink}}" target="_blank" class="...">{{__("View on Etherscan")}}</a>
@else
<a href="{{$txIdLink}}" target="_blank" class="...">{{__("View on Blockchain")}}</a>
@endif
@if($type=='withdrawn')
<button type="button" data-clipboard-text="{{ $txId }}" class="...>
{{__("Copy Proof Link")}}
<svg ....>
</svg>
<svg ...
</svg>
</button>
@endif
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</x-slot>
<x-slot name="footer"></x-slot>
@push('scripts')
<script>
var clipboardButton = new ClipboardJS('.copy-button');
clipboardButton.on('success', function(e) {
...
</script>
@endpush
</x-jet-dialog-modal>
</div>
提前致谢。
您的搜索字段在条件中：
@if (count($transactions) > 0)
因此，如果您没有 $transactions，则不会显示 @if 指令中的所有内容。您需要将搜索字段移到 @if 之外。您可能想将其移到 @if.
我假设 @if ($merchant == 1) 应该包装您的搜索输入：
@if($merchant==1)
<div class="w-full hidden lg:block" style="height: 70px;">
<div class="min-w-2 w-1\/2" style="width: 33.3%; float: left;">
<div class="relative rounded-md mt-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="..." /></svg>
</div>
<input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
</div>
</div>
</div>
@endif
@if (count($transactions) > 0)
...
@endif