customerSearch.vue 2.4 KB

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