From 43c7301cbb3245633e531163f2b4d1aefea0bd03 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Fri, 13 Jun 2025 11:49:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(market):=20=E6=88=91=E7=9A=84=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加搜索抽屉，支持用户名、手机号和时间范围筛选
- 优化搜索逻辑，重置筛选条件并更新数据列表
- 调整搜索框样式，增加点击事件以打开抽屉
---
 pages/market/clue/index.vue | 165 +++++++++++++++++++++++++++++++-----
 1 file changed, 145 insertions(+), 20 deletions(-)

diff --git a/pages/market/clue/index.vue b/pages/market/clue/index.vue
index 2163f43..6732e86 100644
--- a/pages/market/clue/index.vue
+++ b/pages/market/clue/index.vue
@@ -11,12 +11,12 @@
         @scrolltolower="loadMoreData_1"
         style="height: 100vh;"
     >
-      <view class="search_section">
+      <view class="search_section" >
         <view class="item">
-          <view class="input_box">
-            <fui-input :clearable="true" label="时间筛选" borderTop placeholder="开始时间-结束时间" @click="openDatePicker" v-model="filteredData_1.shared_at_str"></fui-input>
+          <view class="input_box" @click="openShowDrawer()">
+            <view class="input_box_text">用户名/手机号/时间范围</view>
           </view>
-          <view class="button" @click="searchData()">搜索</view>
+          <view class="button" @click="openShowDrawer()">搜索</view>
         </view>
       </view>
       <view class="card" v-for="(v,k) in tableList_1" :key="k">
@@ -79,10 +79,10 @@
     >
       <view class="search_section">
         <view class="item">
-          <view class="input_box">
-            <fui-input :clearable="true" label="时间筛选" borderTop placeholder="开始时间-结束时间" @click="openDatePicker" v-model="filteredData_2.shared_at_str"></fui-input>
+          <view class="input_box" @click="openShowDrawer()">
+            <view class="input_box_text">用户名/手机号/时间范围</view>
           </view>
-          <view class="button" @click="searchData()">搜索</view>
+          <view class="button" @click="openShowDrawer()">搜索</view>
         </view>
       </view>
       <view class="card" v-for="(v,k) in tableList_2" :key="k">
@@ -132,10 +132,54 @@
       </view>
     </scroll-view>
 
+<!--下拉选择器-->
     <fui-select :show="select_show" :options="select_options"  title="请选择员工" @confirm="getSales" @close="closeAssign"></fui-select>
 
+<!--    时间范围选择器-->
     <fui-date-picker range :show="date_picker_show" type="3" @change="changeDatePicker" @cancel="cancelDatePicker"></fui-date-picker>
 
+    <!--    我的客户搜索条件栏目-->
+    <fui-drawer :show="showDrawer" direction="left" :maskClosable="true">
+      <view class="fui-scroll__view">
+        <view class="fui-title">筛选</view>
+        <scroll-view scroll-y style="height: 720rpx;">
+          <view class="drawer_box">
+            <fui-list-cell>
+              <view class="item">
+                <view class="title">时间筛选</view>
+                <view class="input_box">
+                  <fui-input :clearable="true"  borderTop placeholder="开始时间-结束时间" @click="openDatePicker" v-model="showDrawerForm.shared_at_str"></fui-input>
+                </view>
+              </view>
+            </fui-list-cell>
+
+            <fui-list-cell>
+              <view class="item">
+                <view class="title">姓名筛选</view>
+                <view class="input_box">
+                  <fui-input :clearable="true"  borderTop placeholder="姓名筛选" v-model="showDrawerForm.name"></fui-input>
+                </view>
+              </view>
+            </fui-list-cell>
+
+            <fui-list-cell>
+              <view class="item">
+                <view class="title">电话筛选</view>
+                <view class="input_box">
+                  <fui-input :clearable="true"  borderTop placeholder="电话筛选" v-model="showDrawerForm.phone_number"></fui-input>
+                </view>
+              </view>
+            </fui-list-cell>
+          </view>
+        </scroll-view>
+        <view class="fui-btn__box">
+          <fui-button type="success" width="400rpx" height="84rpx" text="搜索" bold @click="searchData()">
+          </fui-button>
+          <fui-button type="warning" width="400rpx" height="84rpx" text="关闭" bold @click="closeShowDrawer()">
+          </fui-button>
+        </view>
+      </view>
+    </fui-drawer>
 
     <view style="height: 170rpx;"></view>
     <AQTabber/>
@@ -166,9 +210,6 @@ export default {
         is_gh: '2',//1=资源分配,2=我的客户
       },
 
-
-
-
       //顶部Tab栏
       values: [
         {
@@ -191,6 +232,8 @@ export default {
         total:10,//数据总条数
         shared_by:'',//共享人ID|0=未分配
         shared_at_str:'',//共享时间|开始时间(Y-m-d)-结束时间(Y-m-d)
+        phone_number:'',//客户资源表-手机号
+        name:'',//客户资源表-用户姓名
       },
       //数据列表
       tableList_1:[],//表格数据
@@ -203,6 +246,8 @@ export default {
         total:10,//数据总条数
         shared_by:'0',//共享人ID|0=未分配
         shared_at_str:'',//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+        phone_number:'',//客户资源表-手机号
+        name:'',//客户资源表-用户姓名
       },
       //数据列表
       tableList_2:[],//表格数据
@@ -220,6 +265,15 @@ export default {
       //时间选择器相关
       date_picker_show:false,//是否展示时间选择器
 
+      //抽屉搜索条件展示窗相关
+      showDrawer:false,//是否展示|false=否
+      showDrawerForm:{
+        shared_at_str:'',//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+        phone_number:'',//客户资源表-手机号
+        name:'',//客户资源表-用户姓名
+      },
+
+
     }
   },
   onLoad(options) {},
@@ -435,12 +489,25 @@ export default {
     //切换tag列表
     async segmented(param) {
       this.segmented_type = param.id//1=我的客户,2=资源分配
+
+      //重置筛选抽屉中的表单数据
+      this.showDrawerForm.shared_at_str = ''//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+      this.showDrawerForm.phone_number = ''//客户资源表-手机号
+      this.showDrawerForm.name = ''//客户资源表-用户姓名
+
       if(this.segmented_type == 1){
+        this.filteredData_1.shared_at_str = ''//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+        this.filteredData_1.phone_number = ''//客户资源表-手机号
+        this.filteredData_1.name = ''//客户资源表-用户姓名
+
         //我的客户
         //重置为第一页
         await this.resetFilteredData_1()
         await this.getList_1()
       }else{
+        this.filteredData_2.shared_at_str = ''//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+        this.filteredData_2.phone_number = ''//客户资源表-手机号
+        this.filteredData_2.name = ''//客户资源表-用户姓名
         //资源分配
         //重置为第一页
         await this.resetFilteredData_2()
@@ -557,14 +624,7 @@ export default {
     changeDatePicker(e){
       console.log('时间',e)
       let shared_at_str = `${e.startDate.result} ~ ${e.endDate.result}`
-
-      if (this.segmented_type == 1) {
-        //我的客户
-        this.filteredData_1.shared_at_str = shared_at_str
-      } else {
-        //资源分配
-        this.filteredData_2.shared_at_str = shared_at_str
-      }
+      this.showDrawerForm.shared_at_str = shared_at_str
       this.cancelDatePicker()
     },
     //打开时间选择器
@@ -579,14 +639,30 @@ export default {
     //检索数据
     async searchData(){
       if(this.segmented_type == 1){
+        this.filteredData_1.shared_at_str = this.showDrawerForm.shared_at_str//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+        this.filteredData_1.phone_number = this.showDrawerForm.phone_number//客户资源表-手机号
+        this.filteredData_1.name = this.showDrawerForm.name//客户资源表-用户姓名
         //我的客户
         await this.resetFilteredData_1()
         await this.getList_1()
       }else{
+        this.filteredData_2.shared_at_str = this.showDrawerForm.shared_at_str//共享时间|[开始时间(Y-m-d),结束时间(Y-m-d)]
+        this.filteredData_2.phone_number = this.showDrawerForm.phone_number//客户资源表-手机号
+        this.filteredData_2.name = this.showDrawerForm.name//客户资源表-用户姓名
         //资源分配
         await this.resetFilteredData_2()
         await this.getList_2()
       }
+      this.closeShowDrawer()
+    },
+
+    //打开抽屉筛选弹窗
+    openShowDrawer(){
+      this.showDrawer = true
+    },
+    //关闭抽屉筛选弹窗
+    closeShowDrawer(){
+      this.showDrawer = false
     }
   }
 }
@@ -609,8 +685,13 @@ export default {
         justify-content: center;
         .input_box {
           width: 75%;
-          ::v-deep .fui-input__wrap{
-            height: 100%;
+          .input_box_text{
+            height: 60rpx;
+            line-height: 60rpx;
+            background-color: #fff;
+            padding-left: 20rpx;
+            color: #cccccc;
+            font-size: 28rpx;
           }
         }
         .button{
@@ -723,4 +804,48 @@ export default {
     height: 50rpx;
     background-color: #F59A23;
   }
+
+  //抽屉搜索栏
+  .fui-scroll__view {
+    margin-top: 60rpx;
+    width: 520rpx;
+    flex: 1;
+    overflow: hidden;
+    .fui-title {
+      padding: 40rpx 32rpx;
+      padding-bottom: 20rpx;
+      box-sizing: border-box;
+      font-weight: bold;
+    }
+    .drawer_box{
+      border: 1px solid red;
+      .item{
+        display: flex;
+        flex-direction: column;
+        gap: 15rpx;
+        .title{}
+        .input_box {
+          border: 1px solid #292929;
+          width: 450rpx;
+          ::v-deep .fui-input__wrap{
+            padding: 10rpx !important;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .fui-btn__box {
+      padding: 40rpx 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 30rpx;
+    }
+  }
+
+
+
+
+
 </style>