|
|
@@ -1,36 +1,60 @@
|
|
|
<template>
|
|
|
<view class="t-index-address">
|
|
|
<scroll-view class="t-index-address__scroll-view" :scroll-into-view="scrollview" :scroll-y="true" :enable-flex="true">
|
|
|
- <div class="city_hot">
|
|
|
- <div class="hot_item" v-for="(i,s) in hotCitys" :key="s" @click="$emit('select', i)">{{ i.cityName }}</div>
|
|
|
+ <div class="keyw">
|
|
|
+ <span class="lico iconfont"></span>
|
|
|
+ <input v-model="keyword" @input="Suggestion" placeholder="城市、地址关键字" class="inp"/>
|
|
|
+ <div class="sugs_list" v-if="sugs.length">
|
|
|
+ <div class="sugs_item" v-for="(i,s) in sugs" :key="s" @click="onsug(i)">
|
|
|
+ <div class="tit">{{ i.title }}</div>
|
|
|
+ <div class="address ellipsis">{{ i.province }} - {{ i.city }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <view :id="group.initials" v-for="group in cityList" :key="group.initials">
|
|
|
- <view class="t-index-address__anchor">
|
|
|
- <text>{{ group.initials }}</text>
|
|
|
- </view>
|
|
|
- <view class="t-index-address__list">
|
|
|
- <view class="t-index-address__cell" v-for="(city, index) in group.list" :key="index" @click="$emit('select', city)">
|
|
|
- <text>{{ city.cityName }}</text>
|
|
|
+ <template v-if="!sugs.length">
|
|
|
+ <div class="city_hot">
|
|
|
+ <div class="tit_hot">热门城市</div>
|
|
|
+ <div class="city_box">
|
|
|
+ <div class="hot_item" v-for="(i,s) in hotCitys" :key="s" @click="$emit('select', i)">{{ i.cityName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <view :id="group.initials" v-for="group in cityList" :key="group.initials">
|
|
|
+ <view class="t-index-address__anchor">
|
|
|
+ <text>{{ group.initials }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="t-index-address__list">
|
|
|
+ <view class="t-index-address__cell" v-for="(city, index) in group.list" :key="index" @click="$emit('select', city)">
|
|
|
+ <text>{{ city.cityName }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
</scroll-view>
|
|
|
- <view class="t-index-address__sidebar">
|
|
|
- <view class="t-index-address__index" v-for="group in cityList" :key="group.initials" @touchstart.stop.prevent="onTouchMove(group.initials)" @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
|
|
|
- <span>{{ group.initials }}</span>
|
|
|
+ <template v-if="!sugs.length">
|
|
|
+ <view class="t-index-address__sidebar">
|
|
|
+ <view class="t-index-address__index" v-for="group in cityList" :key="group.initials" @touchstart.stop.prevent="onTouchMove(group.initials)" @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
|
|
|
+ <span>{{ group.initials }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="t-index-address__alert" v-if="touchmove">
|
|
|
+ <text>{{ activeIndex }}</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="t-index-address__alert" v-if="touchmove">
|
|
|
- <text>{{ activeIndex }}</text>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import {similar} from '@/pagesB/static/js/similar.js';
|
|
|
+import QQMapWX from '@/pagesB/static/js/qqmap-wx-jssdk.min.js';
|
|
|
+const showmap = new QQMapWX({ key: 'K7LBZ-RE23Q-JEN5D-4ZNEI-MS54Q-BHF6D' });
|
|
|
import { post } from "@/request/api.js";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ keyword: "",
|
|
|
+ sugs: [], //关键词结果,城市列表
|
|
|
+ sugone: {},
|
|
|
+
|
|
|
scrollview: "A",
|
|
|
hotCitys: [],
|
|
|
cityList: [],
|
|
|
@@ -67,6 +91,37 @@ export default {
|
|
|
onTouchStop() {
|
|
|
this.touchmove = false;
|
|
|
},
|
|
|
+ Suggestion(va){
|
|
|
+ let that = this;
|
|
|
+ if (!va.detail.value.length) this.sugs = [];
|
|
|
+ showmap.getSuggestion({
|
|
|
+ keyword: this.keyword,
|
|
|
+ success(res){
|
|
|
+ let da = res.data
|
|
|
+ console.log(da);
|
|
|
+ that.sugs = da;
|
|
|
+ let s1 = similar(this.keyword,da[0].city)
|
|
|
+ let s2 = similar(this.keyword,da[0].district)
|
|
|
+ that.sugs.unshift({
|
|
|
+ title: s1 > s2 ? da[0].city : da[0].district,
|
|
|
+ province: da[0].province,
|
|
|
+ city: da[0].city,
|
|
|
+ location: da[0].location
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onsug(va){
|
|
|
+ let { lat, lng } = va.location
|
|
|
+ let adres = { longitude: lng, latitude: lat };
|
|
|
+ post("local/hotel/city", adres).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ let da = res.data;
|
|
|
+ da.queryText = va.title;
|
|
|
+ this.$emit('select', da);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initCityList();
|
|
|
@@ -143,16 +198,65 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.keyw{
|
|
|
+ position: relative;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ .lico{
|
|
|
+ position: absolute;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ top: 13rpx;
|
|
|
+ left: 50rpx;
|
|
|
+ }
|
|
|
+ .inp{
|
|
|
+ height: 58rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: rgba($color: #000, $alpha: 0.05);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 0 68rpx;
|
|
|
+ }
|
|
|
+ .sugs_list{
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ .sugs_item{
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tit{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ .city{
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.city_hot {
|
|
|
- padding: 28rpx 32rpx;
|
|
|
- display: grid;
|
|
|
- justify-content: space-between;
|
|
|
- // 划分列 功能函数关键字 repeat (auto-fill,100rpx)
|
|
|
- // 根据子元素的盒子的份额自动计算可以平铺几次
|
|
|
- grid-template-columns: repeat(auto-fill, 100rpx);
|
|
|
- // grid-gap 是 row-gap 和 column-gap 的简写形式。
|
|
|
- grid-gap: 0 1px;
|
|
|
- margin-bottom: -10rpx;
|
|
|
+ .tit_hot{
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ }
|
|
|
+ .city_box {
|
|
|
+ padding: 0 32rpx 28rpx;
|
|
|
+ display: grid;
|
|
|
+ justify-content: space-between;
|
|
|
+ // 划分列 功能函数关键字 repeat (auto-fill,100rpx)
|
|
|
+ // 根据子元素的盒子的份额自动计算可以平铺几次
|
|
|
+ grid-template-columns: repeat(auto-fill, 100rpx);
|
|
|
+ // grid-gap 是 row-gap 和 column-gap 的简写形式。
|
|
|
+ margin-bottom: -10rpx;
|
|
|
+ grid-gap: 0 1px;
|
|
|
+ }
|
|
|
|
|
|
.hot_item {
|
|
|
width: 100rpx;
|