<template>
|
<u-popup mode="center" :show="visible" @close="close" :round="10" :safeAreaInsetTop="true" :safeAreaInsetBottom="true">
|
|
<view class="picker-boxWrap" :style="{maxHeight:maxHeight+'px'}">
|
|
<!-- 添加输入框：模糊查询 调用接口 -->
|
<view class="picker-input" v-if="isShowSearch">
|
<u-input v-model="searchValue" type="text" placeholder="请输入..." clearable></u-input>
|
<u-button type="primary" @click="onSearch" :disabled="!searchValue">搜索</u-button>
|
</view>
|
|
<view class="picker-box">
|
<view class="picker-item-group">
|
<view class="picker-item auto-wrap" v-for="(item,index) in list" :key="'picker-item-'+index" @tap.stop="onItemClick(index,item)">
|
{{(typeof(item)==='string'||typeof(item)==='number'||typeof(item)==='boolean'||item===null)?item:item[labelField]}}
|
</view>
|
|
<view v-if="list.length===0" class="text-tip">
|
暂无数据
|
</view>
|
</view>
|
|
|
</view>
|
|
|
</view>
|
</u-popup>
|
</template>
|
|
<script>
|
const MAX_HEIGHT = 500
|
export default {
|
name:'easyPickerCompontent',
|
emits:['update:visible','select','getCurrentData'],
|
props:{
|
visible:{
|
type:Boolean,
|
default:false
|
},
|
list:{
|
type:Array,
|
default:function(){
|
return []
|
}
|
},
|
valueField:{
|
type:String,
|
default:'value'
|
},
|
labelField:{
|
type:String,
|
default:'label'
|
},
|
isShowSearch:{
|
type:Boolean,
|
default:false
|
},
|
},
|
data(){
|
return {
|
maxHeight:MAX_HEIGHT,
|
searchValue:''
|
}
|
},
|
methods:{
|
close(){
|
this.$emit('update:visible',false)
|
},
|
onItemClick(index,selection){
|
let valObj = selection;
|
let val;
|
if (typeof selection === 'string' || typeof selection === 'number'||typeof(selection)==='boolean'||selection===null) {
|
val = selection;
|
} else {
|
try{
|
val = selection[this.valueField];
|
}catch(e){
|
val = selection;
|
}
|
}
|
this.close()
|
this.$emit('select',val,valObj,index)
|
},
|
setMaxHeight(calHeight) {
|
const spaceHeight = 10
|
if (calHeight>spaceHeight) {
|
calHeight = calHeight - spaceHeight
|
this.maxHeight = calHeight
|
}
|
},
|
// 模糊查询
|
onSearch(){
|
let searchValue = this.searchValue.trim()
|
if (searchValue) {
|
this.$emit('getCurrentData',searchValue)
|
}
|
}
|
},
|
beforeMount(){
|
let safety = this.$store.getters['system/getSafety'];
|
if (safety) {
|
this.setMaxHeight(safety.height)
|
} else {
|
uni.getSystemInfo({
|
success:(res=>{
|
if (!res.safeAreaInsets) res.safeArea = {}
|
this.setMaxHeight(res.safeArea.height || 0)
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.picker-boxWrap{
|
width: 80vw;
|
background-color:#f0f8ff;
|
overflow: auto;
|
box-sizing: border-box;
|
}
|
.picker-box{
|
width: 80vw;
|
background-color:#f0f8ff;
|
border-radius: 20rpx;
|
padding-top: 30rpx;
|
overflow: auto;
|
display: flex;
|
justify-content: center;
|
box-sizing: border-box;
|
.picker-item-group{
|
width: 80%;
|
}
|
.picker-item{
|
margin: 0 20rpx 30rpx 20rpx;
|
text-align: center;
|
background-image: linear-gradient(to right, $color-paimary-darken, $color-paimary-lighten);
|
border: 1px solid #e4e4e4;
|
border-radius: 10rpx;
|
font-size: 1.2rem;
|
padding: 20rpx;
|
}
|
}
|
.picker-input{
|
display: flex;
|
align-items: center;
|
margin: 20rpx;
|
.u-input{
|
flex: 1;
|
}
|
.u-button{
|
margin-left: 10rpx;
|
width: 150rpx;
|
}
|
}
|
.text-tip{
|
text-align: center;
|
font-size: 1.2rem;
|
color: #999;
|
padding: 20rpx 0;
|
}
|
</style>
|
