xinyouhe/crm-uni
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

名片部分页面。地图定位。国家下拉搜索 回收站

Browse Source
This commit is contained in:
浅念
2025-03-25 13:12:24 +08:00
parent f7ff9d65a5
commit e3abe0bf18
18 changed files with 747 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/customer/add.vue
+103 -15
View File
@@ -117,21 +117,37 @@
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showmagnitude" @cancel="cancel('showmagnitude')" @close="close('showmagnitude')" :columns="magnitudeList" keyName="name" @confirm="magnitudeChange"></u-picker>
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showcartype" @cancel="cancel('showcartype')" @close="close('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker>
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showgrade" @cancel="cancel('showgrade')" @close="close('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showarea" @cancel="cancel('showarea')" @close="close('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker>
<!-- <u-popup :show="showmap" :round="10" mode="bottom" @close="mapclose" width="90%" height="70%">
<view class="mapcont">
<view class="header">
<view class="cancel" @click="mapclose">取消</view>
<view class="title">地图位置</view>
<view class="confirm" @click="mapconfirm">确定</view>
</view>
<view class="map" id="map">
</view>
<!-- <u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showarea" @cancel="cancel('showarea')" @close="close('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker> -->
<u-popup closeOnClickOverlay :show="showarea" mode="bottom" :round="10" @close="close('showarea')">
<view class="text">
<view class="qx" @click="close('showarea') ">{{$t('cancel')}}</view>
<view class="qd" @click="arerfn">{{$t('confirm')}}</view>
</view>
</u-popup> -->
<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>
@@ -140,7 +156,11 @@
export default {
data() {
return {
mapUrl: '',
actives:'',
searchKeyword: "", // 搜索关键词
selectedLabel: "", // 选中的值（显示在输入框中）
filteredOptions: [], // 过滤后的数据
mapUrl: '',
showmap: false,
showmagnitude: false,
showgrade: false,
@@ -259,7 +279,8 @@
method:'get',
}).then(res => {
var list = res.data.data
this.areaList = [list]
this.areaList = list
this.filteredOptions = list;
})
},
//商机
@@ -302,6 +323,31 @@
this.car_type_name = val.value[0].name
this.showcartype = false
},
// 国家搜索处理函数
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.actives = item.id
console.log("选中的值:", item.id);
console.log("选中的值:", item.name);
},
arerfn(){
this.showarea = false; // 关闭弹窗
this.country_name = this.selectedLabel
this.form.country_id = this.actives
},
cancel(val){
this[val] = false
},
@@ -436,4 +482,46 @@
height: 350px;
}
}
//
.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>