<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 v-if="isShow"> <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/customer.js' export default{ data(){ return{ listData:[], queryWord:'', pageSize:20, pageNo:1, isShow:true } }, onLoad() { this.queryWord='' this.listData=[] }, onShow() { this.queryWord='' this.listData=[] }, 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){ console.log(val) this.queryWord=this.listData[val].customerName // uni.navigateTo({ // url:'/pages/sales/addSales' // }) uni.navigateTo({ url:'/pages/sales/addSales?pageType=edit&nowId='+this.listData[val].id }) } } } </script> <style lang="scss"> .search-box{ width: 100%; display: flex; flex-direction: column; // flex: 1; .picker-content{ padding: 6upx 0 20upx; flex: 1; .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>