|
@@ -0,0 +1,86 @@
|
|
|
+<template>
|
|
|
+ <view class="search-box">
|
|
|
+ <u-search
|
|
|
+ placeholder="请输入客户名称搜索"
|
|
|
+ v-model="queryWord"
|
|
|
+ @input="searchBrand"
|
|
|
+ @search="searchBrand"
|
|
|
+ @clear="clearSearch"
|
|
|
+ :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': $config('primaryColor'), 'border-radius': '6upx', 'padding': '12upx 0'}">
|
|
|
+ </u-search>
|
|
|
+ <scroll-view class="picker-content flex_1" scroll-y>
|
|
|
+ <view class="picker-main">
|
|
|
+ <view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)">
|
|
|
+ <view class="item-name">{{item.customerName}}</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="listData&&listData.length>=20" style="color:#999;font-size: 26upx;">最多显示前20条匹配客户,请尝试输入更多内容</view>
|
|
|
+ <view v-if="listData && listData.length == 0">
|
|
|
+ <u-empty text="暂无匹配客户" mode="list" :img-width="200" :margin-top="60"></u-empty>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {customerList} from '@/api/sales.js'
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ listData:[],
|
|
|
+ queryWord:'',
|
|
|
+ pageSize:20,
|
|
|
+ pageNo:1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getData(){
|
|
|
+ customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
|
|
|
+ if(res.status == 200 && res.data){
|
|
|
+ this.listData = res.data.list
|
|
|
+ }else{
|
|
|
+ this.listData = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 搜索品牌
|
|
|
+ searchBrand(){
|
|
|
+ if(this.queryWord != ''){
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearSearch(){
|
|
|
+ this.queryWord = ''
|
|
|
+ this.listData = []
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ chooseItem(val){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .search-box{
|
|
|
+ width: 100%;
|
|
|
+ .picker-content{
|
|
|
+ padding: 6upx 0 20upx;
|
|
|
+ .picker-main{
|
|
|
+ width: 100%;
|
|
|
+ .picker-main-item{
|
|
|
+ padding: 0 20upx;
|
|
|
+ .item-name{
|
|
|
+ padding: 14upx 0;
|
|
|
+ border-bottom: 1rpx solid #e5e6eb;
|
|
|
+ }
|
|
|
+ .item-name:not(:last-child){
|
|
|
+ border-bottom:none
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|