465 lines
13 KiB
Vue
465 lines
13 KiB
Vue
<template>
|
|
<view class="nyn-city-list-container">
|
|
<!-- 搜索框 -->
|
|
<!-- <view class="search">
|
|
<input
|
|
type="text"
|
|
placeholder="请输入城市名称"
|
|
placeholder-style="font-size:20rpx"
|
|
@input="bindinputCitys"
|
|
/>
|
|
</view> -->
|
|
<uni-nav-bar
|
|
title=""
|
|
:fixed="true"
|
|
:border="false"
|
|
:left-width="'60rpx'"
|
|
:right-width="'160rpx'"
|
|
:statusBar="true"
|
|
:height="'34px'"
|
|
>
|
|
<block slot="left">
|
|
<view class="left-block" @click="handerSkip">
|
|
<image
|
|
style="
|
|
width: 11px;
|
|
height: 18px;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
"
|
|
lazy-load
|
|
src="data:image/png;base64,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"
|
|
/>
|
|
</view>
|
|
</block>
|
|
<view class="input-view">
|
|
<uni-icons
|
|
type="search"
|
|
size="22"
|
|
color="#666666"
|
|
style="line-height: 60rpx"
|
|
/>
|
|
<input
|
|
confirm-type="search"
|
|
class="input"
|
|
type="text"
|
|
placeholder="输入城市名进行搜索"
|
|
@input="bindinputCitys"
|
|
/>
|
|
</view>
|
|
</uni-nav-bar>
|
|
<!-- 热门城市 -->
|
|
<view class="ynq-AutoAddress">
|
|
<text class="iconfontAili icon-dingwei1"></text>
|
|
<text style="margin: 0 12rpx">当前定位城市</text>
|
|
<text>{{ loactionCity }}</text>
|
|
</view>
|
|
<text>热门城市</text>
|
|
<view class="hot">
|
|
<view
|
|
class="hot-item"
|
|
v-for="item in hotList"
|
|
:key="item.id"
|
|
@tap="bindCity(item)"
|
|
:data-city="item.name"
|
|
>{{ item.name }}</view
|
|
>
|
|
</view>
|
|
<!-- 首字母检索 -->
|
|
<view class="searchLetter touchClass">
|
|
<!-- 右边字母数据数据 触摸事件-->
|
|
<view
|
|
v-for="item in searchLetter"
|
|
:key="item.name"
|
|
:data-letter="item.name"
|
|
:style="{ height: `${itemH}px` }"
|
|
@touchstart.stop="searchStart"
|
|
@touchmove.stop="searchMove"
|
|
@touchend.stop="searchEnd"
|
|
>{{ item.name }}</view
|
|
>
|
|
</view>
|
|
<!-- 左边字母跟右边字母true时 屏幕中心显示选中的首字母-->
|
|
<!-- 居中首字母样式 -->
|
|
<view class="cont_Letter" v-if="isShowLetter">
|
|
{{ showLetter }}
|
|
</view>
|
|
<scroll-view
|
|
scroll-y="true"
|
|
:style="{ height: `${winHeight}px` }"
|
|
:scroll-top="scrollTop"
|
|
enhanced
|
|
:show-scrollbar="false"
|
|
v-if="!search"
|
|
>
|
|
<!-- 循环城市数据 -->
|
|
<view v-for="(value, key) in cityList" :key="key">
|
|
<!-- 循环首字母检索信息 -->
|
|
<view class="list_letter">{{ key }}</view>
|
|
<!-- 城市ID城市名称 -->
|
|
<view
|
|
class="item_city"
|
|
v-for="item in value"
|
|
:key="item.id"
|
|
:data-city="item.name"
|
|
@tap="bindCity(item)"
|
|
>{{ item.name }}</view
|
|
>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 搜索列表 -->
|
|
<view class="list" v-if="search">
|
|
<view
|
|
class="text"
|
|
v-for="item in searchList"
|
|
:key="item.id"
|
|
@tap="bindCity(item)"
|
|
:data-city="item.name"
|
|
>{{ item.name }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import address from "./citys.js";
|
|
export default {
|
|
name: "NynCityList",
|
|
props: {
|
|
hot: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isShowLetter: false, //拖动时，是否显示中间字母
|
|
showLetter: "A", //中间字母
|
|
searchLetter: [], //字母检索列表
|
|
itemH: 0, //字母列表的高度
|
|
startPageY: 0, //开始拖动字母时Y坐标
|
|
bHeight: 0,
|
|
tHeight: 0,
|
|
CityName: "",
|
|
scrollTop: 0, //城市列表容器滚动条的位置
|
|
winHeight: 0, //城市列表窗口高度
|
|
cityList: [], //城市列表
|
|
hotList: [], //热门列表
|
|
search: false, //是否搜索
|
|
searchList: [],
|
|
time: 0,
|
|
isAdd: false,
|
|
};
|
|
},
|
|
onShow() {},
|
|
onLoad(options) {
|
|
if (options.isAdd) {
|
|
this.isAdd = options.isAdd;
|
|
}
|
|
this.initList();
|
|
},
|
|
methods: {
|
|
handerSkip() {
|
|
uni.navigateBack();
|
|
},
|
|
/* 列表初始化 */
|
|
initList() {
|
|
let searchLetter = [];
|
|
for (let key in address.cities) {
|
|
searchLetter.push(key);
|
|
}
|
|
let hotList = address.hotCities;
|
|
let cityList = address.cities;
|
|
let sysInfo = uni.getSystemInfoSync();
|
|
let winHeight = sysInfo.windowHeight;
|
|
//添加要匹配的字母范围值
|
|
//更加屏幕高度设置子元素的高度
|
|
let itemH = winHeight / searchLetter.length;
|
|
let tempObj = [];
|
|
for (let i = 0; i < searchLetter.length; i++) {
|
|
let temp = {};
|
|
temp.name = searchLetter[i];
|
|
temp.tHeight = i * itemH;
|
|
temp.bHeight = (i + 1) * itemH;
|
|
tempObj.push(temp);
|
|
}
|
|
this.winHeight = winHeight;
|
|
this.itemH = itemH - "20";
|
|
this.searchLetter = tempObj;
|
|
this.cityList = cityList;
|
|
this.hotList = hotList;
|
|
},
|
|
/* 搜索城市时触发 */
|
|
bindinputCitys(e) {
|
|
if (this.time !== null) {
|
|
clearTimeout(this.time);
|
|
}
|
|
|
|
this.time = setTimeout(() => {
|
|
if (e.detail.value != "") {
|
|
this.search = true;
|
|
} else {
|
|
this.search = false;
|
|
}
|
|
let cities = this.cityList;
|
|
let cyits = [];
|
|
for (let key in cities) {
|
|
for (let i = 0; i < cities[key].length; i++) {
|
|
if (
|
|
cities[key][i].name.search(e.detail.value) != -1 ||
|
|
cities[key][i].spell.search(e.detail.value) != -1
|
|
) {
|
|
cyits.push(cities[key][i]);
|
|
}
|
|
}
|
|
}
|
|
this.searchList = cyits;
|
|
}, 300);
|
|
},
|
|
/* 检索字母拖动开始 */
|
|
searchStart(e) {
|
|
let showLetter = e.currentTarget.dataset.letter;
|
|
let pageY = e.touches[0].pageY;
|
|
this.setScrollTop(showLetter);
|
|
this.nowLetter(pageY);
|
|
this.showLetter = showLetter;
|
|
this.startPageY = pageY;
|
|
this.isShowLetter = true;
|
|
// let pageY = e.touches[0].pageY;
|
|
// this.nowLetter(pageY);
|
|
// this.startPageY = pageY;
|
|
// this.isShowLetter = true
|
|
},
|
|
/* 检索字母拖动中 */
|
|
searchMove(e) {
|
|
let pageY = e.touches[0].pageY;
|
|
let startPageY = this.startPageY;
|
|
let tHeight = this.tHeight;
|
|
let bHeight = this.bHeight;
|
|
// let showLetter = 0;
|
|
if (startPageY - pageY > 0) {
|
|
//向上移动
|
|
if (pageY < tHeight) {
|
|
this.nowLetter(pageY);
|
|
}
|
|
} else {
|
|
//向下移动
|
|
if (pageY > bHeight) {
|
|
this.nowLetter(pageY);
|
|
}
|
|
}
|
|
},
|
|
/* 检索字母拖动结束 */
|
|
searchEnd() {
|
|
setTimeout(() => {
|
|
this.isShowLetter = false;
|
|
}, 1000);
|
|
},
|
|
/* 点击城市 */
|
|
bindCity(item) {
|
|
// 向外传递这个城市
|
|
// this.$emit("bindCity", item);
|
|
uni.setStorageSync("city", item.name);
|
|
uni.navigateBack();
|
|
},
|
|
/* 设置scroll-view滚动距离 */
|
|
setScrollTop(showLetter) {
|
|
let scrollTop = 0;
|
|
let cityList = this.cityList;
|
|
let cityCount = 0;
|
|
let initialCount = 0;
|
|
for (let key in cityList) {
|
|
if (showLetter == key) {
|
|
scrollTop = initialCount * 30 + cityCount * 41;
|
|
break;
|
|
} else {
|
|
initialCount++;
|
|
cityCount += cityList[key].length;
|
|
}
|
|
}
|
|
this.scrollTop = scrollTop;
|
|
},
|
|
/* */
|
|
nowLetter(pageY) {
|
|
let letterData = this.searchLetter;
|
|
let bHeight = 0;
|
|
let tHeight = 0;
|
|
let showLetter = "";
|
|
for (let i = 0; i < letterData.length; i++) {
|
|
if (letterData[i].tHeight <= pageY && pageY <= letterData[i].bHeight) {
|
|
bHeight = letterData[i].bHeight;
|
|
tHeight = letterData[i].tHeight;
|
|
showLetter = letterData[i].name;
|
|
break;
|
|
}
|
|
}
|
|
// this.setScrollTop(showLetter);
|
|
this.bHeight = bHeight;
|
|
this.tHeight = tHeight;
|
|
this.showLetter = showLetter;
|
|
this.startPageY = pageY;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nyn-city-list-container {
|
|
padding: 0 48rpx;
|
|
background: #fff;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.ynq-AutoAddress {
|
|
margin: 48rpx 0;
|
|
}
|
|
|
|
/* 隐藏滚动条 */
|
|
.scroll-view {
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.scroll-view::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari */
|
|
}
|
|
|
|
.input-view {
|
|
width: 92%;
|
|
display: flex;
|
|
background-color: #f5f5f5;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
padding: 0 4%;
|
|
flex-wrap: nowrap;
|
|
margin: 10rpx 0;
|
|
line-height: 60rpx;
|
|
margin-left: 10rpx;
|
|
color: #b9b9b9;
|
|
}
|
|
|
|
.input-view .uni-icon {
|
|
line-height: 60rpx !important;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.input-view .uni-icons {
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.input-view .input {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
width: 94%;
|
|
padding: 0 2%;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.search {
|
|
background-color: #ffffff;
|
|
border: 1px solid #cccccc;
|
|
width: 686rpx;
|
|
border-radius: 100rpx;
|
|
margin: 20rpx auto;
|
|
padding: 4rpx;
|
|
input {
|
|
line-height: 60rpx;
|
|
text-align: left;
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
/* 首字母样式 */
|
|
.searchLetter {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 20%;
|
|
width: 30px;
|
|
height: 80%;
|
|
text-align: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #666;
|
|
background-color: #fff;
|
|
z-index: 1;
|
|
view {
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
/* 右边首字母样式 */
|
|
.touchClass {
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
/* 居中显示的选中首字母 */
|
|
.cont_Letter {
|
|
background-color: #666;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -50px;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 10px;
|
|
font-size: 26px;
|
|
z-index: 1;
|
|
}
|
|
/* 循环数据首字母检索 */
|
|
.list_letter {
|
|
display: flex;
|
|
background-color: #fff;
|
|
height: 30px;
|
|
color: #2a2a2a;
|
|
font-size: 26rpx;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
/* 城市样式 */
|
|
.item_city {
|
|
display: flex;
|
|
background-color: #fff;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #2a2a2a;
|
|
font-size: 28rpx;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f8f8f8;
|
|
}
|
|
.hot {
|
|
background: #ffffff;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
margin: 10px 0px;
|
|
justify-content: space-between;
|
|
|
|
.hot-item {
|
|
font-size: 28rpx;
|
|
padding: 4px 11px;
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
background: #f5f5f6;
|
|
width: 17%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.list {
|
|
.eng {
|
|
background: #ffffff;
|
|
padding: 30rpx;
|
|
color: #212121;
|
|
}
|
|
.text {
|
|
color: #212121;
|
|
font-size: 28rpx;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
}
|
|
</style>
|