选择客户

pages/clientDetail/clientDetail.vue

@@ -13,7 +13,7 @@
 				<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="100" disabled>
 					<uni-forms-item label="客户名称" name="schoolId" required>
 						<uni-easyinput v-if="isDetail" v-model="form.customerName" disabled />
-						<hpy-form-select v-else placeholder="请选择学校" :dataList="schoolList" text="schoolName" name="schoolId" v-model="form.schoolId" @change="schoolChange" hideBorder hideArrow/>
+						<view v-else :class="['school-input', {active: form.customerName}]" @click="schoolVisible = true">{{ form.customerName || '请选择学校' }}</view>
 					</uni-forms-item>
 					<uni-forms-item label="省份">
 						<uni-easyinput v-model="form.provinceName" disabled />
@@ -71,6 +71,16 @@
 				<view class="text">订单</view>
 			</view>
 		</view>
+		
+		<view class="mask" v-show="schoolVisible" @click="closeSchool"></view>
+		<view class="school-popup" v-show="schoolVisible">
+			<view class="top">请选择学校</view>
+			<uni-icons class="close" type="closeempty" size="20" @click="closeSchool"></uni-icons>
+			<uni-search-bar class="search" radius="5" placeholder="请输入学校名称" v-model="keyword" clearButton="auto" cancelButton="none" />
+			<view class="list">
+				<view class="item" v-for="item in schoolList" @click="schoolChange(item)">{{ item.schoolName }}</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -95,7 +105,11 @@
 					value: 3
 				}],
 				nameRepeat: false,
+				schoolVisible: false,
+				keyword: '',
+				searchTimer: null,
 				schoolList: [],
+				schoolListAll: [],
 				industryClassList: [],
 				industryList: [],
 				form: {
@@ -153,6 +167,14 @@
 				customerType: '',
 			}
 		},
+		watch: {
+			keyword () {
+				clearTimeout(this.searchTimer)
+				this.searchTimer = setTimeout(() => {
+					this.filterSchool()
+				}, 500)
+			}
+		},
 		onLoad(option) {
 			this.customerId = option.customerId
 			this.isDetail = !!option.show
@@ -195,20 +217,34 @@
 					provinceId: '',
 					cityId: ''
 				}).then(({ list }) => {
+					this.schoolListAll = list
 					this.schoolList = list
 				}).catch(res => {})
 			},
+			// 学校模糊匹配
+			filterSchool() {
+				const { keyword } = this
+				this.schoolList = keyword ? 
+					this.schoolListAll.filter(e => e.schoolName.includes(keyword)) :
+					this.schoolListAll
+			},
+			// 关闭学校弹框
+			closeSchool() {
+				this.schoolVisible = false
+				this.keyword = ''
+			},
 			// 客户名称选择回调
-			schoolChange() {
+			schoolChange(school) {
 				const { form } = this
 				const { schoolId } = form
-				console.log(33, form)
+				form.schoolId = school.schoolId
-				const school = this.schoolList.find(e => e.schoolId === schoolId)
 				form.customerName = school.schoolName
 				form.provinceId = school.provinceId
 				form.provinceName = school.provinceName
 				form.cityId = school.cityId
 				form.cityName = school.cityName
+				this.closeSchool()
+				// 客户名称判重
 				queryCustomerIsExists({
 					schoolId
 				}).then(res => {
@@ -306,4 +342,55 @@
 		color: #959595;
 	}
 }
+.school-input {
+	padding: 0 10px;
+	font-size: 12px;
+	line-height: 34px;
+	color: #ccc;
+	border: 1px solid #e5e5e5;
+	border-radius: 4px;
+	&.active {
+		color: #333;
+	}
+}
+.mask {
+	z-index: 9;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, .5);
+}
+.school-popup {
+	z-index: 10;
+	position: fixed;
+	bottom: 0%;
+	width: 100%;
+	height: 90vh;
+	background-color: #fff;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	.top {
+		text-align: center;
+		line-height: 50px;
+		font-size: 14px;
+		color: #333;
+		border-bottom: 1px solid #f1f1f1;
+	}
+	.close {
+		position: absolute;
+		top: 15px;
+		right: 15px;
+	}
+	.list {
+		max-height: calc(90vh - 103px);
+		padding: 0 15px;
+		overflow: auto;
+		.item {
+			line-height: 34px;
+			font-size: 12px;
+		}
+	}
+}
 </style>

pages/clients/clients.vue

@@ -6,7 +6,7 @@
 
 		<uni-card :is-shadow="false" :border="false" padding="0" is-full>
 			<view class="filter">
-				<uni-search-bar class="search" radius="5" placeholder="请输入客户名称" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="search" />
+				<uni-search-bar class="search" radius="5" placeholder="请输入客户名称" v-model="keyword" clearButton="auto" cancelButton="none" />
 				<sl-filter class="sl-filter" :independence="true" :menuList="menuList" @result="result"></sl-filter>
 			</view>
 		</uni-card>
@@ -85,7 +85,7 @@
 			slFilter
 		},
 		watch: {
-			keyword (newName, oldName) {
+			keyword () {
 				clearTimeout(this.searchTimer)
 				this.searchTimer = setTimeout(() => {
 					this.initList()