确认收货添加搜索/卡片高亮/位置移动

canteen/pages/purchase/receipt.vue

@@ -1,6 +1,15 @@
 <template>
-	<view class="content">
-		<view class="card" v-for="(item, index) in list" :key="index">
+	<view>
+		<view class="lf-p-l-30 lf-p-r-30 lf-m-t-30 lf-w-100" style="position: fixed;top: 80rpx;overflow: hidden;z-index: 111;">
+			<view class="lf-flex search-self lf-w-100">
+				<u-icon name="search" class="search-icon"></u-icon>
+				<input placeholder="搜索物资" confirm-type="search" class="lf-m-l-10 lf-font-28" :value="searchValue" @input="inputChange" @confirm="inputConfirm" />
+			</view>
+		</view>
+		<view class="search-employ"></view>
+		
+		<view class="content" style="margin-top: 80rpx;">
+			<view class="card" v-for="(item, index) in list" :key="index" :class="item.searchStyle?'search-color':''">
 				<view class="lf-row-between">
 					<view class="flex lf-row-center justify-center text-center">
 						<view class="lf-color-black lf-font-bold" v-if="item.material && item.material.m_name">{{ item.material.m_name }}</view>
@@ -99,15 +108,20 @@
 					</view>
 				</view>
 			</u-popup>
-		<!-- 预览图片组件 -->
		<lf-previewimage ref="previewimage" />
+			<!-- 预览图片组件 -->
+			<lf-previewimage ref="previewimage" />
+		</view>
 	</view>
 </template>
 
 <script>
-	import { uploadFile } from '@/common/uploadFile.js'
+	import { uploadFile } from '@/common/uploadFile.js';
+	let timer = null;
 	export default {
 		data(){
 			return {
+				show_icon: true,
+				searchValue: '',
 				list: [],
 				is_show_edit: false,
 				current_show: {
@@ -155,6 +169,42 @@
 			this.getData();
 		},
 		methods: {
+			// 搜索input值被改变
+			inputChange(event){
+				if(timer){
+					clearTimeout(timer);
+					timer = null;
+				}
+				timer = setTimeout(() => {
+					this.searchValue = event.detail.value;
+					let positionIndex = null;
+					this.list.forEach((item,index) => {
+						if(this.searchValue && item.material.m_name.indexOf(this.searchValue) >= 0){
+							if(positionIndex == null){
+								positionIndex = index; // 拿到第一个被匹配的table item
+							}
+							this.$set(item,'searchStyle',true)
+						}else {
+							this.$set(item,'searchStyle',false)
+						}
+					})
+					if(positionIndex != null) {
+						let tabView = document.querySelector('.content'); // 获取第一层大对象，table
+						let tabContent = tabView.querySelector('.card'); // 获取第二层
+						let offsetHeight = tabContent.offsetHeight; // table行高度
+						let heightself = offsetHeight*positionIndex
+						uni.pageScrollTo({
+						    scrollTop: heightself
+						});
+					}else if(this.searchValue){
+						this.$msg('该关键字没有搜索到物资哦')
+					}
+				}, 1000);
+			},
+			// 搜索按下回车
+			inputConfirm(event){
+				this.searchValue = event.detail.value;
+			},
 			// 预览图片
 			lookImage(current){
 				this.$u.throttle(() => {
@@ -318,11 +368,38 @@
 	}
 </style>
 <style lang="scss" scoped="scoped">
+	.search-employ {
+		height: 162rpx;
+		background-color: rgb(246, 246, 246);
+		overflow: hidden;
+		position: fixed;
+		width: 100%;
+		top: 28rpx;
+	}
+	.search-color {
+		background-color: #ffdede!important;
+	}
+	.search-icon {
+		color: #777;
+	}
+	.search-self {
+		background: rgb(228,228,228);
+		padding: 10rpx 0 10rpx 20rpx;
+		border-radius: 40rpx;
+		font-size: 28rpx;
+	}
+	.search-self .uni-input-placeholder {
+		margin-right: 500px;
+		color: #777;
+		font-size: 28rpx;
+	}
 	.content{
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
 		flex-direction: column;
+		overflow: scroll;
+		-webkit-overflow-scrolling: touch;
 	}
 	.card{
 		width: 686rpx;

supplier/pages/offer/index.vue

@@ -45,9 +45,9 @@
 		<view class="box">
 			<view class="lf-m-b-20 lf-row-between">
 				<view class="lf-font-32 lf-color-black lf-font-bold">报价明细</view>
-				<view class="flex lf-row-between">
-					<u-icon name="search" class="search-icon" v-if="show_icon"></u-icon>
-					<input placeholder="搜索物资" confirm-type="search" @focus="hideIcon()" class="search-self" :value="searchValue" @input="inputChange" @confirm="inputConfirm" />
+				<view class="lf-flex search-self">
+					<u-icon name="search" class="search-icon"></u-icon>
+					<input placeholder="搜索物资" confirm-type="search" @focus="hideIcon()" class="lf-m-l-10 lf-font-28" :value="searchValue" @input="inputChange" @confirm="inputConfirm" />
 				</view>
 				
 			</view>
@@ -471,8 +471,6 @@
 </style>
 <style lang="scss" scoped="scoped">
 	.search-icon {
-		position: relative;
-		left: 50rpx;
 		color: #777;
 	}
 	.search-self {
@@ -482,7 +480,7 @@
 		font-size: 28rpx;
 	}
 	.search-self .uni-input-placeholder {
-		margin-left: 40rpx;
+		margin-right: 500px;
 		color: #777;
 		font-size: 28rpx;
 	}