chooseCustomer.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view class="chooseCustomer-content">
  3. <view class="search">
  4. <view class="flex justify_between align_center search-title">
  5. <text class="search-label">客户名称</text>
  6. <view class="search-btn" v-if="backPage == 'addSales'||backPage == 'authPass'">
  7. <text>没有搜索到?</text>
  8. <text>点击</text>
  9. <text @click="addCustomer">新增客户</text>
  10. </view>
  11. </view>
  12. <u-search
  13. placeholder="请输入客户名称搜索"
  14. v-model="queryWord"
  15. height="90"
  16. @input="searchBrand"
  17. @blur="searchBrand"
  18. @search="searchBrand"
  19. @clear="clearSearch"
  20. :showAction="false">
  21. </u-search>
  22. </view>
  23. <scroll-view class="picker-content flex_1" scroll-y >
  24. <view class="picker-main">
  25. <view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(item)">
  26. <view class="item-name">{{item.customerName}}</view>
  27. </view>
  28. <view v-if="listData&&listData.length>=20" style="color:#999;font-size: 26upx;text-align: center;padding: 10upx;">最多显示前20条匹配客户,请尝试输入更多内容</view>
  29. <view v-if="listData && listData.length == 0">
  30. <u-empty text="暂无匹配客户" mode="list" :img-width="200" :margin-top="60"></u-empty>
  31. </view>
  32. </view>
  33. </scroll-view>
  34. </view>
  35. </template>
  36. <script>
  37. import {customerList} from '@/api/customer.js'
  38. export default{
  39. data(){
  40. return{
  41. listData:[],
  42. queryWord:'',
  43. pageSize:20,
  44. pageNo:1,
  45. scrollH:300,
  46. backPage:''
  47. }
  48. },
  49. onLoad(opts) {
  50. uni.$on('clear',this.clearSearch)
  51. this.backPage = opts.backPage
  52. },
  53. onShow() {
  54. this.init()
  55. },
  56. onUnload() {
  57. uni.$off('clear',this.clearSearch)
  58. },
  59. methods:{
  60. // 初始数据
  61. init(){
  62. this.listData=[]
  63. this.queryWord=''
  64. this.pageSize=20
  65. this.pageNo=1
  66. },
  67. // 新增客户
  68. addCustomer(){
  69. uni.navigateTo({
  70. url:'/pages/sales/addCustomer'
  71. })
  72. },
  73. getData(){
  74. console.log('调用')
  75. uni.showLoading({title:'加载中...',mask:true})
  76. customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
  77. if(res.status == 200 && res.data){
  78. uni.hideLoading({})
  79. this.listData = res.data.list
  80. }else{
  81. this.listData = []
  82. }
  83. })
  84. },
  85. // 搜索品牌
  86. searchBrand(){
  87. if(this.queryWord != ''){
  88. this.getData()
  89. }
  90. },
  91. clearSearch(){
  92. this.queryWord = ''
  93. this.listData = []
  94. },
  95. chooseItem(item){
  96. console.log(item)
  97. this.queryWord=item.customerName
  98. // 新增销售单
  99. if(this.backPage == 'addSales'){
  100. uni.navigateTo({
  101. url:'/pages/sales/addSales?pageType=edit&nowId='+item.id
  102. })
  103. }
  104. // 销售记录
  105. if(this.backPage == 'salesRecord'){
  106. uni.$emit("searchSalesRecord",item)
  107. uni.navigateBack()
  108. }
  109. // 门店审核通过
  110. if(this.backPage == 'authPass'){
  111. uni.$emit("addCustome",item)
  112. uni.navigateBack()
  113. }
  114. }
  115. },
  116. }
  117. </script>
  118. <style lang="scss">
  119. .chooseCustomer-content{
  120. width: 100%;
  121. height: 100vh;
  122. background-color: #fff;
  123. padding:0 30upx;
  124. display: flex;
  125. flex-direction: column;
  126. .search{
  127. .search-title{
  128. padding: 20upx 0;
  129. .search-label{
  130. font-size: 30upx;
  131. font-weight: 600;
  132. }
  133. .search-btn{
  134. font-size: 28upx;
  135. color: #999;
  136. text:last-child{
  137. display: inline-block;
  138. padding-left: 10upx;
  139. color:#007AFF
  140. }
  141. }
  142. }
  143. }
  144. .picker-content{
  145. padding: 6upx 0 20upx;
  146. width: 100%;
  147. height: calc(100vh-144upx);
  148. flex: 1;
  149. overflow-y: scroll;
  150. .picker-main{
  151. width: 100%;
  152. .picker-main-item{
  153. padding: 0 20upx;
  154. .item-name{
  155. padding: 30upx 0;
  156. border-bottom: 1rpx solid #e5e6eb;
  157. }
  158. .item-name:not(:last-child){
  159. border-bottom:none
  160. }
  161. }
  162. }
  163. }
  164. }
  165. </style>