|
|
<template>
|
|
|
<!-- 城市选择-->
|
|
|
<view class="city-select">
|
|
|
<scroll-view scroll-y="true" class="city-select-main" id="city-select-main" :scroll-into-view="toView">
|
|
|
<!-- 预留搜索-->
|
|
|
<view class="city-serach" v-if="isSearch"><input @input="keyInput" :placeholder="placeholder" class="city-serach-input" /></view>
|
|
|
<!-- 当前定位城市 -->
|
|
|
<view class="hot-title" v-if="activeCity && !serachCity">当前定位城市</view>
|
|
|
<view class="hot-city" v-if="activeCity && !serachCity">
|
|
|
<view class="hot-item" @click="cityTrigger(activeCity)">{{ activeCity[formatName] || '定位失败' }}</view>
|
|
|
|
|
|
<view v-if="isRefresh"
|
|
|
class="refresh-block"
|
|
|
@click="$emit('refreshLocation')">
|
|
|
<u-icon name="map-fill"></u-icon>
|
|
|
<text style="padding-left: 10rpx;">更新定位</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 热门城市 -->
|
|
|
<view class="hot-title" v-if="hotCity.length > 0 && !serachCity">热门城市</view>
|
|
|
<view class="hot-city" v-if="hotCity.length > 0 && !serachCity">
|
|
|
<template v-for="(item, index) in hotCity">
|
|
|
<view :key="index" @click="cityTrigger(item, 'hot')" class="hot-item">{{ item[formatName] }}</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
<!-- 城市列表(搜索前) -->
|
|
|
<view class="citys" v-if="!serachCity">
|
|
|
<view v-for="(city, index) in sortItems" :key="index" v-show="city.isCity" class="citys-row">
|
|
|
<view class="citys-item-letter" :id="'city-letter-' + (city.name === '#' ? '0' : city.name)">{{ city.name }}</view>
|
|
|
<view class="citys-item" v-for="(item, inx) in city.citys" :key="inx" :class="{ 'is-active': activeCity[formatName] === item[formatName] }" @click="cityTrigger(item)">{{ item[formatName] }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 城市列表(搜索后) -->
|
|
|
<view class="citys" v-if="serachCity">
|
|
|
<view v-for="(item, index) in searchDatas" :key="index" class="citys-row">
|
|
|
<view class="citys-item" :key="index" @click="cityTrigger(item)">{{ item.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<!-- 城市选择索引-->
|
|
|
<view class="city-indexs-view" v-if="!serachCity">
|
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
|
<view class="city-indexs" id="index-bar">
|
|
|
<view v-for="(cityIns, index) in handleCity" class="city-indexs-text" v-show="cityIns.isCity" :key="index" @click="cityindex(cityIns.forName)">
|
|
|
{{ cityIns.name }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<view class="city-indexs" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove" id="index-bar">
|
|
|
<view v-for="(cityIns, index) in handleCity" class="city-indexs-text" v-show="cityIns.isCity" :key="index" @click="cityindex(cityIns.forName)">
|
|
|
{{ cityIns.name }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
|
|
|
</view>
|
|
|
<!--选择显示-->
|
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<view v-show="!hidden" class="index-toast">
|
|
|
{{listCurID}}
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import citySelect from './citySelect.js';
|
|
|
export default {
|
|
|
props: {
|
|
|
//是否需要更新定位
|
|
|
isRefresh: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
//查询提示文字
|
|
|
placeholder: {
|
|
|
type: String,
|
|
|
default: '请输入城市名称'
|
|
|
},
|
|
|
//传入要排序的名称
|
|
|
formatName: {
|
|
|
type: String,
|
|
|
default: 'cityName'
|
|
|
},
|
|
|
//当前定位城市
|
|
|
activeCity: {
|
|
|
type: Object,
|
|
|
default: () => null
|
|
|
},
|
|
|
//热门城市
|
|
|
hotCity: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
//城市数据
|
|
|
obtainCitys: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
//是否有搜索
|
|
|
isSearch: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
itemHeight: 0, //索引item高度
|
|
|
hidden: true, //滑动显示
|
|
|
listCurID: '', //滑动显示的字母
|
|
|
toView: 'city-letter-Find', //锚链接 初始值
|
|
|
cityindexs: [], // 城市索引
|
|
|
activeCityIndex: '', // 当前所在的城市索引
|
|
|
handleCity: [], // 处理后的城市数据
|
|
|
serachCity: '', // 搜索的城市
|
|
|
cityData: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
/**
|
|
|
* @desc 城市列表排序
|
|
|
* @return Array
|
|
|
*/
|
|
|
sortItems() {
|
|
|
for (let index = 0; index < this.handleCity.length; index++) {
|
|
|
if (this.handleCity[index].isCity) {
|
|
|
let cityArr = this.handleCity[index].citys;
|
|
|
cityArr = cityArr.sort(function(a, b) {
|
|
|
var value1 = a.unicode;
|
|
|
var value2 = b.unicode;
|
|
|
return value1 - value2;
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
return this.handleCity;
|
|
|
},
|
|
|
/**
|
|
|
* @desc 搜索后的城市列表
|
|
|
* @return Array
|
|
|
*/
|
|
|
searchDatas() {
|
|
|
var searchData = [];
|
|
|
for (let i = 0; i < this.cityData.length; i++) {
|
|
|
if (this.cityData[i][this.formatName].indexOf(this.serachCity) !== -1) {
|
|
|
searchData.push({
|
|
|
oldData: this.cityData[i],
|
|
|
name: this.cityData[i][this.formatName]
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
return searchData;
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
// 初始化城市数据
|
|
|
this.cityData = this.obtainCitys;
|
|
|
this.initializationCity();
|
|
|
this.buildCityindexs();
|
|
|
},
|
|
|
watch: {
|
|
|
obtainCitys(newData) {
|
|
|
this.updateCitys(newData);
|
|
|
}
|
|
|
},
|
|
|
// #ifdef MP-WEIXIN
|
|
|
mounted() {
|
|
|
this.getIndexsHeight();
|
|
|
},
|
|
|
// #endif
|
|
|
methods: {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
//获取索引高度
|
|
|
getIndexsHeight() {
|
|
|
//获取索引高度
|
|
|
let that = this;
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
|
query.select('#index-bar').boundingClientRect(data => {
|
|
|
// console.log("得到布局位置信息", JSON.stringify(data));
|
|
|
// console.log("节点离页面顶部的距离为", data.top);
|
|
|
that.barTop = data.top
|
|
|
const cityIndexName = this.handleCity.filter(item => item.isCity);
|
|
|
this.itemHeight = data.height / cityIndexName.length;
|
|
|
}).exec();
|
|
|
},
|
|
|
//滑动选择Item
|
|
|
tMove(e) {
|
|
|
this.hidden = false
|
|
|
this.listCurID = '';
|
|
|
const cityIndexName = this.handleCity.filter(item => item.isCity);
|
|
|
let y = e.touches[0].clientY,
|
|
|
offsettop = this.barTop,
|
|
|
that = this;
|
|
|
//判断选择区域,只有在选择区才会生效
|
|
|
if (y > offsettop) {
|
|
|
let num = parseInt((y - offsettop) / this.itemHeight);
|
|
|
// console.log(num, cityIndexName.length)
|
|
|
if (num > cityIndexName.length) {
|
|
|
this.hidden = true
|
|
|
this.listCurID = '';
|
|
|
} else {
|
|
|
this.hidden = false
|
|
|
this.listCurID = cityIndexName[num].name
|
|
|
}
|
|
|
} else {
|
|
|
this.listCurID = '';
|
|
|
this.hidden = true
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//触发全部开始选择
|
|
|
tStart() {
|
|
|
if (this.listCurID) {
|
|
|
this.hidden = false
|
|
|
this.listCurID = '';
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//触发结束选择
|
|
|
tEnd() {
|
|
|
this.hidden = true;
|
|
|
this.toView = 'city-letter-' + (this.listCurID == "#" ? "0" : this.listCurID);
|
|
|
this.listCurID = '';
|
|
|
},
|
|
|
// #endif
|
|
|
/**
|
|
|
* @desc 初始化
|
|
|
*/
|
|
|
updateCitys(data) {
|
|
|
if (data && data.length) {
|
|
|
this.cityData = data;
|
|
|
this.initializationCity();
|
|
|
this.buildCityindexs();
|
|
|
// #ifdef MP-WEIXIN
|
|
|
setTimeout(() => {
|
|
|
this.getIndexsHeight();
|
|
|
}, 500);
|
|
|
// #endif
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
* @desc 监听输入框的值
|
|
|
*/
|
|
|
keyInput(event) {
|
|
|
this.serachCity = event.detail.value;
|
|
|
},
|
|
|
/**
|
|
|
* @desc 初始化城市数据
|
|
|
* @return undefind
|
|
|
*/
|
|
|
initializationCity() {
|
|
|
this.handleCity = [];
|
|
|
const cityLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
|
|
|
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'
|
|
|
];
|
|
|
for (let index = 0; index < cityLetterArr.length; index++) {
|
|
|
this.handleCity.push({
|
|
|
name: cityLetterArr[index],
|
|
|
isCity: false, // 用于区分是否含有当前字母开头的城市
|
|
|
citys: [], // 存放城市首字母含是此字母的数组
|
|
|
forName: 'city-letter-' + (cityLetterArr[index] == '#' ? '0' : cityLetterArr[index]) //label的绑定
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
* @desc 得到城市的首字母
|
|
|
* @param str String
|
|
|
*/
|
|
|
getLetter(str) {
|
|
|
return citySelect.getFirstLetter(str[0]);
|
|
|
},
|
|
|
/**
|
|
|
* @desc 构建城市索引
|
|
|
* @return undefind
|
|
|
*/
|
|
|
buildCityindexs() {
|
|
|
this.cityindexs = [];
|
|
|
for (let i = 0; i < this.cityData.length; i++) {
|
|
|
// 获取首字母
|
|
|
const cityLetter = this.getLetter(this.cityData[i][this.formatName]).firstletter;
|
|
|
// 获取当前城市首字母的unicode，用作后续排序
|
|
|
const unicode = this.getLetter(this.cityData[i][this.formatName]).unicode;
|
|
|
|
|
|
const index = this.cityIndexPosition(cityLetter);
|
|
|
if (this.cityindexs.indexOf(cityLetter) === -1) {
|
|
|
this.handleCity[index].isCity = true;
|
|
|
this.cityindexs.push(cityLetter);
|
|
|
}
|
|
|
|
|
|
this.handleCity[index].citys.push({
|
|
|
cityName: this.cityData[i][this.formatName],
|
|
|
unicode: unicode,
|
|
|
oldData: this.cityData[i]
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
* @desc 滑动到城市索引所在的地方
|
|
|
* @param id String 城市索引
|
|
|
*/
|
|
|
cityindex(id) {
|
|
|
this.toView = id;
|
|
|
},
|
|
|
/**
|
|
|
* @desc 获取城市首字母的unicode
|
|
|
* @param letter String 城市索引
|
|
|
*/
|
|
|
cityIndexPosition(letter) {
|
|
|
if (!letter) {
|
|
|
return '';
|
|
|
}
|
|
|
const ACode = 65;
|
|
|
return letter === '#' ? 26 : letter.charCodeAt(0) - ACode;
|
|
|
},
|
|
|
/** @desc 城市列表点击事件
|
|
|
* @param Object
|
|
|
*/
|
|
|
cityTrigger(item) {
|
|
|
// 传值到父组件
|
|
|
this.$emit('cityClick', item.oldData ? item.oldData : item);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
$theme-color: #ca2328;
|
|
|
//宽度转换vw
|
|
|
@function vww($number) {
|
|
|
@return ($number / 375) * 750+rpx;
|
|
|
}
|
|
|
|
|
|
/* #ifndef MP-ALIPAY */
|
|
|
.index-toast {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: vww(40);
|
|
|
bottom: 0;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
width: vww(50);
|
|
|
height: vww(50);
|
|
|
border-radius: 10px;
|
|
|
margin: auto;
|
|
|
color: #fff;
|
|
|
line-height: vww(50);
|
|
|
text-align: center;
|
|
|
font-size: vww(16);
|
|
|
}
|
|
|
|
|
|
/* #endif */
|
|
|
|
|
|
view {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.city-serach {
|
|
|
width: 100%;
|
|
|
color: #4a4a4a;
|
|
|
padding: 0 vww(10);
|
|
|
|
|
|
&-input {
|
|
|
margin: vww(10) 0;
|
|
|
height: vww(40);
|
|
|
line-height: vww(40);
|
|
|
font-size: vww(14);
|
|
|
padding: 0 vww(5);
|
|
|
border: 1px solid $theme-color;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.city-select-main {
|
|
|
position: relative;
|
|
|
// overflow: scroll;
|
|
|
// -webkit-overflow-scrolling: touch;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #f6f5fa;
|
|
|
// overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.city-select {
|
|
|
position: relative;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
background: #f6f5fa;
|
|
|
|
|
|
// 热门城市
|
|
|
.hot-title {
|
|
|
padding-left: vww(23);
|
|
|
width: 100vw;
|
|
|
font-size: 14px;
|
|
|
line-height: vww(40);
|
|
|
color: #9b9b9b;
|
|
|
}
|
|
|
|
|
|
.hot-city {
|
|
|
padding-left: vww(23);
|
|
|
padding-right: vww(20);
|
|
|
overflow: hidden;
|
|
|
width: 100vw;
|
|
|
|
|
|
.refresh-block {
|
|
|
color: $theme-color;
|
|
|
line-height: vww(31);
|
|
|
float: right;
|
|
|
padding-right: vww(23);
|
|
|
}
|
|
|
.hot-item {
|
|
|
float: left;
|
|
|
padding: 0 vww(5);
|
|
|
margin-right: vww(16);
|
|
|
margin-bottom: vww(6);
|
|
|
overflow: hidden;
|
|
|
width: vww(100);
|
|
|
height: vww(31);
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 1;
|
|
|
|
|
|
line-height: vww(31);
|
|
|
color: #4a4a4a;
|
|
|
background: #fff;
|
|
|
border: 1px solid #ebebf0;
|
|
|
|
|
|
&:nth-child(3n) {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.hot-hidden {
|
|
|
display: none;
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.citys {
|
|
|
.citys-row {
|
|
|
padding-left: vww(18);
|
|
|
width: 100%;
|
|
|
font-size: 14px;
|
|
|
background: #fff;
|
|
|
|
|
|
.citys-item-letter {
|
|
|
margin-left: vww(-18);
|
|
|
padding-left: vww(18);
|
|
|
margin-top: -1px;
|
|
|
width: 100vw;
|
|
|
line-height: vww(30);
|
|
|
color: #9b9b9b;
|
|
|
background: #f6f5fa;
|
|
|
border-top: none;
|
|
|
}
|
|
|
|
|
|
.citys-item {
|
|
|
width: 100%;
|
|
|
line-height: vww(50);
|
|
|
color: #4a4a4a;
|
|
|
border-bottom: 1px solid #ebebf0;
|
|
|
|
|
|
&:last-child {
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
.is-active {
|
|
|
color: $theme-color
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.city-indexs-view {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
z-index: 999;
|
|
|
display: flex;
|
|
|
width: vww(20);
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
|
|
|
.city-indexs {
|
|
|
width: vww(20);
|
|
|
text-align: center;
|
|
|
vertical-align: middle;
|
|
|
align-self: center;
|
|
|
|
|
|
.city-indexs-text {
|
|
|
// margin-bottom: vww(10);
|
|
|
width: vww(20);
|
|
|
padding: vww(5) 0;
|
|
|
font-size: 12px;
|
|
|
color: $theme-color;
|
|
|
|
|
|
// &:last-child {
|
|
|
// margin-bottom: 0;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
