customerSearch.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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 v-if="isShow">
  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. isShow:true
  34. }
  35. },
  36. methods:{
  37. getData(){
  38. customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
  39. if(res.status == 200 && res.data){
  40. this.listData = res.data.list
  41. }else{
  42. this.listData = []
  43. }
  44. })
  45. },
  46. // 搜索品牌
  47. searchBrand(){
  48. if(this.queryWord != ''){
  49. this.getData()
  50. }
  51. },
  52. clearSearch(){
  53. this.queryWord = ''
  54. this.listData = []
  55. this.getData()
  56. },
  57. chooseItem(val){
  58. console.log(val)
  59. this.queryWord=this.listData[val].customerName
  60. // uni.navigateTo({
  61. // url:'/pages/sales/addSales'
  62. // })
  63. uni.navigateTo({
  64. url:'/pages/sales/addSales?nowId='+this.listData[val].id
  65. })
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss">
  71. .search-box{
  72. width: 100%;
  73. .picker-content{
  74. padding: 6upx 0 20upx;
  75. .picker-main{
  76. width: 100%;
  77. .picker-main-item{
  78. padding: 0 20upx;
  79. .item-name{
  80. padding: 14upx 0;
  81. border-bottom: 1rpx solid #e5e6eb;
  82. }
  83. .item-name:not(:last-child){
  84. border-bottom:none
  85. }
  86. }
  87. }
  88. }
  89. }
  90. </style>