From e7017fa8b93fb6e281ebd65931c5ffaf797c610a Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Wed, 24 Aug 2022 08:51:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E8=AE=A2=E5=8D=95=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/views/pages/orders/index.blade.php  | 92 ++++++++++++++++++-
 1 file changed, 91 insertions(+), 1 deletion(-)

diff --git a/resources/beike/admin/views/pages/orders/index.blade.php b/resources/beike/admin/views/pages/orders/index.blade.php
index 367f27c6..a6c6f56d 100644
--- a/resources/beike/admin/views/pages/orders/index.blade.php
+++ b/resources/beike/admin/views/pages/orders/index.blade.php
@@ -5,6 +5,44 @@
 @section('content')
   <div id="customer-app" class="card">
     <div class="card-body">
+      <div class="bg-light p-4 mb-3" id="app">
+        <el-form :inline="true" :model="filter" class="demo-form-inline" label-width="100px">
+          <div>
+            <el-form-item label="订单号">
+              <el-input v-model="filter.number" size="small" placeholder="订单号"></el-input>
+            </el-form-item>
+            <el-form-item label="客户姓名">
+              <el-input v-model="filter.customer_name" size="small" placeholder="客户姓名"></el-input>
+            </el-form-item>
+            <el-form-item label="邮箱">
+              <el-input v-model="filter.email" size="small" placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label="电话">
+              <el-input v-model="filter.telephone" size="small" placeholder="电话"></el-input>
+            </el-form-item>
+          </div>
+          <el-form-item label="订单日期">
+            <el-form-item>
+              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" size="small"
+                placeholder="选择日期" v-model="filter.start" style="width: 100%;"></el-date-picker>
+            </el-form-item>
+            <span>-</span>
+            <el-form-item>
+              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" size="small"
+                placeholder="选择日期" v-model="filter.end" style="width: 100%;"></el-date-picker>
+            </el-form-item>
+          </el-form-item>
+        </el-form>
+
+        <div class="row">
+          <label class="wp-100"></label>
+          <div class="col-auto">
+            <button type="button" @click="search" class="btn btn-outline-primary btn-sm">筛选</button>
+            <button type="button" @click="exportOrder" class="btn btn-outline-primary btn-sm ms-1">导出</button>
+            <button type="button" @click="resetSearch" class="btn btn-outline-secondary btn-sm ms-1">重置</button>
+          </div>
+        </div>
+      </div>
       <table class="table">
         <thead>
           <tr>
@@ -30,7 +68,8 @@
               <td>{{ $order->total }}</td>
               <td>{{ $order->created_at }}</td>
               <td>{{ $order->updated_at }}</td>
-              <td><a href="{{ admin_route('orders.show', [$order->id]) }}" class="btn btn-outline-secondary btn-sm">查看</a></td>
+              <td><a href="{{ admin_route('orders.show', [$order->id]) }}" class="btn btn-outline-secondary btn-sm">查看</a>
+              </td>
             </tr>
           @endforeach
         </tbody>
@@ -43,6 +82,57 @@
 
 @push('footer')
   <script>
+    new Vue({
+      el: '#app',
+      data: {
+        url: @json(admin_route('orders.index')),
+        exportUrl: @json(admin_route('orders.index')),
+        filter: {
+          number: bk.getQueryString('number'),
+          customer_name: bk.getQueryString('customer_name'),
+          email: bk.getQueryString('email'),
+          telephone: bk.getQueryString('telephone'),
+          start: bk.getQueryString('start'),
+          end: bk.getQueryString('end'),
+        },
+      },
 
+      computed: {
+        query() {
+          let query = '';
+          const filter = Object.keys(this.filter)
+            .filter(key => this.filter[key])
+            .map(key => key + '=' + this.filter[key])
+            .join('&');
+
+          const page = bk.getQueryString('page');
+
+          if (page) {
+            query += '?page=' + page;
+          }
+
+          if (filter) {
+            query += (page ? '&' : '?') + filter;
+          }
+
+          return query;
+        }
+      },
+
+      methods: {
+        search() {
+          location = this.url + this.query
+        },
+
+        resetSearch() {
+          Object.keys(this.filter).forEach(key => this.filter[key] = '')
+          location = this.url + this.query
+        },
+
+        exportOrder() {
+          location = this.exportUrl + this.query
+        },
+      }
+    });
   </script>
 @endpush