名片部分页面。地图定位。国家下拉搜索 回收站
This commit is contained in:
浅念
+109
-19
@@ -57,7 +57,7 @@
|
||||
<u-divider text=""></u-divider>
|
||||
<view class="cell1">
|
||||
<view class="item">{{$t('customer.Country')}}</view>
|
||||
<view class="right select" @click="showarea = true">
|
||||
<view class="right select" @click="showPicker = true">
|
||||
<view class="" :class="['content2', { placeholder: !country_name }]">{{country_name || $t('customer.Countryinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
@@ -66,16 +66,52 @@
|
||||
<view class="foot">
|
||||
<button class="btn" @click="bcFn">{{$t('save')}}</button>
|
||||
</view>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexgj" :show="showarea" @cancel="cancel('showarea')" @close="close('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexgs" :show="showcomp" @cancel="cancel('showcomp')" @close="close('showcomp')" :columns="company" keyName="name" @confirm="companyChange"></u-picker>
|
||||
|
||||
<u-popup closeOnClickOverlay :show="showPicker" mode="bottom" :round="10" @close="close('showPicker')">
|
||||
<view class="text">
|
||||
<view class="qx" @click="close('showPicker') ">{{$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 filteredOptions"
|
||||
: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>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { nextTick } from "vue"
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loca:uni.getLocale(),
|
||||
actives:'',
|
||||
showPicker: false, // 控制选择器显示
|
||||
searchKeyword: "", // 搜索关键词
|
||||
selectedLabel: "", // 选中的值（显示在输入框中）
|
||||
filteredOptions: [], // 过滤后的数据
|
||||
showarea: false,
|
||||
showcomp: false,
|
||||
country_name:'',
|
||||
@@ -83,8 +119,6 @@
|
||||
areaList:[],
|
||||
defaultIndexgj:[0],
|
||||
company_name:'',
|
||||
company:[],
|
||||
company1:[],
|
||||
defaultIndexgs:[0],
|
||||
imageStyles: {
|
||||
border: true,
|
||||
@@ -99,6 +133,34 @@
|
||||
this.getinfo()
|
||||
},
|
||||
methods: {
|
||||
// 搜索处理函数
|
||||
handleSearch() {
|
||||
var that = this
|
||||
if (this.searchKeyword) {
|
||||
console.log(this.searchKeyword)
|
||||
this.filteredOptions = this.areaList1.filter((item) => item.name.includes(this.searchKeyword));
|
||||
|
||||
console.log(this.filteredOptions)
|
||||
} else {
|
||||
// 如果搜索框为空，显示全部数据
|
||||
this.filteredOptions = this.areaList1;
|
||||
}
|
||||
},
|
||||
// 选择选项
|
||||
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
|
||||
|
||||
},
|
||||
getinfo(){
|
||||
var that= this;
|
||||
request({
|
||||
@@ -109,19 +171,13 @@
|
||||
res.data.data.position=''
|
||||
}
|
||||
that.userinfo = res.data.data;
|
||||
|
||||
this.actives = res.data.data.country_id
|
||||
this.country_name = res.data.data.country_name
|
||||
that.select1()
|
||||
})
|
||||
},
|
||||
select1(){
|
||||
var that=this;
|
||||
that.areaList1.forEach((item,index) => {
|
||||
if(item.id == that.userinfo.country_id){
|
||||
that.country_name = item.name
|
||||
that.defaultIndexgj=[index]
|
||||
console.log(that.country_name)
|
||||
}
|
||||
})
|
||||
that.company1.forEach((item,index) => {
|
||||
if(item.id == that.userinfo.sign){
|
||||
that.company_name = item.name
|
||||
@@ -129,12 +185,6 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
//国家切换事件
|
||||
areaChange(val){
|
||||
this.userinfo.country_id = val.value[0].id
|
||||
this.country_name = val.value[0].name
|
||||
this.showarea = false
|
||||
},
|
||||
//国家
|
||||
area(){
|
||||
request({
|
||||
@@ -143,7 +193,7 @@
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.areaList1 = list
|
||||
this.areaList = [list]
|
||||
this.filteredOptions = list;
|
||||
this.select1()
|
||||
})
|
||||
},
|
||||
@@ -311,4 +361,44 @@
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user