|
|
|
@ -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; |
|
|
|
|
