Browse Source

feat(market): 线索页面添加时间筛选功能

- 在"我的客户"和"资源分配"页面中添加时间筛选搜索框
- 实现时间选择器弹窗,支持选择开始时间和结束时间
- 添加搜索功能,根据筛选条件重新加载数据
- 优化页面样式,增加搜索区域样式
master
liutong 11 months ago
parent
commit
7bdc9bc1cc
  1. 92
      pages/market/clue/index.vue

92
pages/market/clue/index.vue

@ -3,6 +3,8 @@
<fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff" <fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff"
@click="segmented"></fui-segmented-control> @click="segmented"></fui-segmented-control>
<!--我的客户--> <!--我的客户-->
<scroll-view <scroll-view
v-if="segmented_type == 1" v-if="segmented_type == 1"
@ -11,6 +13,14 @@
@scrolltolower="loadMoreData" @scrolltolower="loadMoreData"
style="height: 100vh;" style="height: 100vh;"
> >
<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>
<view class="button" @click="searchData()">搜索</view>
</view>
</view>
<view class="card" v-for="(v,k) in tableList_1" :key="k"> <view class="card" v-for="(v,k) in tableList_1" :key="k">
<view style="width: 70%;" @click="clue_info(v)"> <view style="width: 70%;" @click="clue_info(v)">
<view style="display: flex;align-items: center;padding: 20rpx;"> <view style="display: flex;align-items: center;padding: 20rpx;">
@ -68,6 +78,14 @@
@scrolltolower="loadMoreData" @scrolltolower="loadMoreData"
style="height: 100vh;" style="height: 100vh;"
> >
<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>
<view class="button" @click="searchData()">搜索</view>
</view>
</view>
<view class="card" v-for="(v,k) in tableList_2" :key="k"> <view class="card" v-for="(v,k) in tableList_2" :key="k">
<view style="width: 70%;"> <view style="width: 70%;">
<view style="display: flex;align-items: center;padding: 20rpx;"> <view style="display: flex;align-items: center;padding: 20rpx;">
@ -117,6 +135,9 @@
<fui-select :show="select_show" :options="select_options" title="请选择员工" @confirm="getSales" @close="closeAssign"></fui-select> <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>
<view style="height: 170rpx;"></view> <view style="height: 170rpx;"></view>
<AQTabber/> <AQTabber/>
</view> </view>
@ -169,6 +190,8 @@ export default {
page:1,// page:1,//
limit:10,// limit:10,//
total:10,// total:10,//
shared_by:'',//ID|0=
shared_at_str:'',//|(Y-m-d)-(Y-m-d)
}, },
// //
tableList_1:[],// tableList_1:[],//
@ -180,7 +203,7 @@ export default {
limit:10,// limit:10,//
total:10,// total:10,//
shared_by:'0',//ID|0= shared_by:'0',//ID|0=
shared_at:[],//|[(Y-m-d),(Y-m-d)] shared_at_str:'',//|[(Y-m-d),(Y-m-d)]
}, },
// //
tableList_2:[],// tableList_2:[],//
@ -195,6 +218,8 @@ export default {
// } // }
],// ],//
//
date_picker_show:false,//
} }
}, },
@ -513,6 +538,43 @@ export default {
this.segmented(param) this.segmented(param)
}, 1000) }, 1000)
}, },
//
//-
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.cancelDatePicker()
},
//
openDatePicker(){
this.date_picker_show = true
},
//
cancelDatePicker(){
this.date_picker_show = false
},
//
async searchData(){
if(this.segmented_type == 1){
//
await this.resetFilteredData_1()
await this.getList_1()
}else{
//
await this.resetFilteredData_2()
await this.getList_2()
}
}
} }
} }
</script> </script>
@ -523,6 +585,34 @@ export default {
height: 100vh; height: 100vh;
background-color: #292929; background-color: #292929;
overflow: auto; overflow: auto;
.search_section{
margin-top: 20rpx;
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
.item {
height: 60rpx;
display: flex;
justify-content: center;
.input_box {
width: 75%;
::v-deep .fui-input__wrap{
height: 100%;
}
}
.button{
display: flex;
justify-content: center;
align-items: center;
border-radius: 5rpx;
font-size: 24rpx;
color: #fff;
background-color: #455bfe;
width: 20%;
height: 100%;
}
}
}
} }
.search{ .search{
width: 92%; width: 92%;

Loading…
Cancel
Save