count-pass-app/components/popup-select/index.vue

<template>
    <u-picker
      showToolbar
      :show="showPicker"
      :immediateChange='true'
      :columns="[options?options:option]"
      keyName='text'
      :cancelText="$t('settings.cancelText')"
      :confirmText="$t('settings.confirmText')"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    >
    <view class="search-box" v-if="hasSearch==true">
      <view class="input-wrap">
        <u-search
        bgColor='#f2f2f2'
        :showAction='false' 
        :placeholder="$t('base.common.inputPlaceholder')" 
        @search="search"
        @clear='search'
        v-model="searchText">
        </u-search>
        <view class="search-btn" @click="search">{{$t("customer_meter.search")}}</view>
      </view>
    </view>
    </u-picker>
</template>

<script>
export default {
  data(){
    return {
      showPicker:false,
      searchText:'',
      options:null,
    }
  },
  props:{
    kind:{
      type:String,
    },
    hasSearch:{
      type:Boolean,
      default: false,
    },
    option:{
      type:Array,
      default:[],
    }
  },
  methods:{
    onConfirm(item){
		console.log("选择框信息、已选择信息、",this.options,item)
      this.showPicker=false
      this.$emit('onConfirm',item.value[0],this.kind)
    },
    search(){
      // this.$emit('search',this.searchText,this.kind)
      if(this.searchText){
        let arr=[]
        this.option.forEach(item=>{
          if(item.text.indexOf(this.searchText) != -1 ){
            arr.push(item)
          }
        })
        console.log(arr);
        
        this.options=arr
      }else{
        this.options=JSON.parse(JSON.stringify(this.option))
      }
      
    }
  }
}
</script>

<style lang="less" scoped>

.search-box{
  padding: 10px 16px 0;
  .input-wrap{
    flex: 1;
    display: flex;
    background-color: #f2f2f2;
    border-radius: 100rpx;
    align-items: center;
    margin-right: 20rpx;
    .search-btn{
      align-items: center;
      margin-right: 32rpx;
      padding-left: 20rpx;
      height: 44rpx;
      line-height: 44rpx;
      color: #333;
        border-left: 1px solid #d3d3d3;
    }
  }
}

</style>