php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(market): 我的客户页面增加搜索功能 

- 添加搜索抽屉，支持用户名、手机号和时间范围筛选
- 优化搜索逻辑，重置筛选条件并更新数据列表
- 调整搜索框样式，增加点击事件以打开抽屉
master
liutong 10 months ago
parent
be6a904904
commit
43c7301cbb
1 changed files with 145 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      pages/market/clue/index.vue

165
pages/market/clue/index.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save