浅念
125 lines
2.4 KiB
Vue
125 lines
2.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="text">
|
|
<view class="qx" @click="close('showarea') ">{{$t('cancel')}}</view>
|
|
<view class="qd" @click="arerfn">{{$t('confirm')}}</view>
|
|
</view>
|
|
<view class="popup-content">
|
|
<!-- 搜索框 -->
|
|
<u-input
|
|
v-model="searchKeyword"
|
|
:placeholder="$t('keyword')"
|
|
@input="handleSearch"
|
|
></u-input>
|
|
|
|
<!-- 选项列表 -->
|
|
<scroll-view scroll-y class="option-list">
|
|
<view
|
|
v-for="(item, index) in areaList"
|
|
:key="index"
|
|
class="option-item"
|
|
@click="handleSelect(item)"
|
|
:class="actives==item.id?'actives':''"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
<view v-if="filteredOptions.length === 0" class="no-data">
|
|
{{$t('noresults')}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"select",
|
|
props: {
|
|
showarea: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
areaList:[],
|
|
},
|
|
data() {
|
|
return {
|
|
searchKeyword:'',
|
|
filteredOptions:'',
|
|
|
|
};
|
|
},
|
|
methods:{
|
|
// 搜索处理函数
|
|
handleSearch(){
|
|
if (this.searchKeyword) {
|
|
console.log(this.searchKeyword)
|
|
this.filteredOptions = this.areaList.filter((item) =>
|
|
item.name.includes(this.searchKeyword)
|
|
);
|
|
console.log(this.filteredOptions)
|
|
} else {
|
|
// 如果搜索框为空，显示全部数据
|
|
this.filteredOptions = this.areaList;
|
|
}
|
|
},
|
|
// 选择选项
|
|
handleSelect(item) {
|
|
this.selectedLabel = item.name; // 回显选中的值
|
|
// this.searchKeyword = item.name
|
|
this.actives = item.id
|
|
// this.showPicker = false; // 关闭弹窗
|
|
console.log("选中的值:", item.id);
|
|
console.log("选中的值:", item.name);
|
|
},
|
|
arerfn(){
|
|
this.showPicker = false; // 关闭弹窗
|
|
this.country_name = this.selectedLabel
|
|
this.userinfo.country_id = this.actives
|
|
|
|
},
|
|
close(val){
|
|
this[val] = false
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.actives{
|
|
background-color: #dfdfdf;
|
|
}
|
|
.text{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
line-height: 30px;
|
|
padding: 10px 15px 0px;
|
|
.qd{
|
|
color: #3471FF;
|
|
}
|
|
}
|
|
.popup-content {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.option-list {
|
|
max-height: 400rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.option-item {
|
|
padding: 20rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.option-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
color: #999;
|
|
}
|
|
</style> |