customerSearch.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <view class="search-box">
  3. <u-search
  4. placeholder="请输入客户名称搜索"
  5. v-model="queryWord"
  6. @input="searchBrand"
  7. @search="searchBrand"
  8. @clear="clearSearch"
  9. :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': $config('primaryColor'), 'border-radius': '6upx', 'padding': '12upx 0'}">
  10. </u-search>
  11. <scroll-view class="picker-content flex_1" scroll-y>
  12. <view class="picker-main">
  13. <view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)">
  14. <view class="item-name">{{item.customerName}}</view>
  15. </view>
  16. <view v-if="listData&&listData.length>=20" style="color:#999;font-size: 26upx;">最多显示前20条匹配客户,请尝试输入更多内容</view>
  17. <view v-if="listData && listData.length == 0">
  18. <u-empty text="暂无匹配客户" mode="list" :img-width="200" :margin-top="60"></u-empty>
  19. </view>
  20. </view>
  21. </scroll-view>
  22. </view>
  23. </template>
  24. <script>
  25. import {customerList} from '@/api/sales.js'
  26. export default{
  27. data(){
  28. return{
  29. listData:[],
  30. queryWord:'',
  31. pageSize:20,
  32. pageNo:1,
  33. }
  34. },
  35. methods:{
  36. getData(){
  37. customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
  38. if(res.status == 200 && res.data){
  39. this.listData = res.data.list
  40. }else{
  41. this.listData = []
  42. }
  43. })
  44. },
  45. // 搜索品牌
  46. searchBrand(){
  47. if(this.queryWord != ''){
  48. this.getData()
  49. }
  50. },
  51. clearSearch(){
  52. this.queryWord = ''
  53. this.listData = []
  54. this.getData()
  55. },
  56. chooseItem(val){
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss">
  62. .search-box{
  63. width: 100%;
  64. .picker-content{
  65. padding: 6upx 0 20upx;
  66. .picker-main{
  67. width: 100%;
  68. .picker-main-item{
  69. padding: 0 20upx;
  70. .item-name{
  71. padding: 14upx 0;
  72. border-bottom: 1rpx solid #e5e6eb;
  73. }
  74. .item-name:not(:last-child){
  75. border-bottom:none
  76. }
  77. }
  78. }
  79. }
  80. }
  81. </style>