You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
7.2 KiB
285 lines
7.2 KiB
<template>
|
|
<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage" :customHeader="true">
|
|
|
|
<view slot="gBody" class="gui-flex1 gui-flex gui-columns">
|
|
<!-- 搜索组件 -->
|
|
<view class="gui-city-search gui-bg-gray" id="hSearch">
|
|
<gui-search @clear="search" @inputting="search" placeholder="城市名"></gui-search>
|
|
</view>
|
|
<view class="gui-padding gui-margin-top">
|
|
<text class="gui-h6 gui-block-text gui-primary-color">当前所选 : {{currentCity}}</text>
|
|
</view>
|
|
<!-- 城市列表 -->
|
|
<scroll-view :scroll-y="true" :scroll-into-view="showCityId" :scroll-with-animation="true"
|
|
:style="{height:mainHeight+'px'}">
|
|
<view class="gui-padding" id="pageTop">
|
|
<text class="gui-h6 gui-block-text gui-primary-color" style="padding-bottom:10rpx;">热门城市</text>
|
|
<view class="gui-flex gui-rows gui-wrap " style="padding-bottom:10rpx; padding-right:20rpx;">
|
|
|
|
<text class="hotcity-item gui-block-text" v-if="dingweiCity" @tap="chooseCity2" style="background: linear-gradient(to bottom, #90178b, #590b6e);padding: 10rpx 14rpx;
|
|
color: #fff;"><text class=" gui-icons"></text>{{dingweiCity}}</text>
|
|
<text class="hotcity-item gui-block-text" v-else @tap="onAuthorize" style="background: linear-gradient(to bottom, #90178b, #590b6e);padding: 10rpx 14rpx;
|
|
color: #fff;"><text class=" gui-icons"></text>点击定位</text>
|
|
<text class="hotcity-item gui-block-text" v-for="(item, index) in hotCities" :key="index"
|
|
:data-cityname="item.name" :data-citycode="item.code" @tap="chooseCity">{{item.name}}</text>
|
|
</view>
|
|
<block v-for="(cities, index) in cityData" :key="index">
|
|
<text class="gui-city-AZ gui-block-text" :id="'gui-city-AZ-'+index">{{index}}</text>
|
|
<text class="city-item gui-block-text gui-border-b" :id="'gui-city-list-'+city.code"
|
|
v-for="(city, cindex) in cities" :key="cindex" :data-cityname="city.name"
|
|
:data-citycode="city.code" @tap="chooseCity">{{city.name}}</text>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="gui-city-AZ-right" style="background-color: #eeeeee;color: #848484;">
|
|
<text class="gui-city-AZ-right-item gui-block-text gui-transition-all" v-for="(char, index) in AZ"
|
|
:key="index"
|
|
:class="[rightTapIdx == index ? 'gui-bg-black' : '', rightTapIdx == index ? 'gui-color-white' : '']"
|
|
:data-char="char" :data-idx="index" @tap="changAZ">{{char}}</text>
|
|
</view>
|
|
</view>
|
|
</gui-page>
|
|
</template>
|
|
<script>
|
|
var graceJS = require('@/GraceUI5/js/grace.js');
|
|
var dataObj = require('@/GraceUI5/data/cityData.js');
|
|
import * as Api from '@/api/page'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 全屏 loading
|
|
pageLoading: true,
|
|
// 核心区域高度
|
|
mainHeight: 200,
|
|
cityData: dataObj.cityData,
|
|
AZ: dataObj.AZ,
|
|
currentCity: "",
|
|
hotCities: [{
|
|
code: 450200,
|
|
name: "柳州市"
|
|
},
|
|
{
|
|
code: 450300,
|
|
name: "桂林市"
|
|
},
|
|
{
|
|
code: 450500,
|
|
name: "北海市"
|
|
},
|
|
{
|
|
code: 450700,
|
|
name: "钦州市"
|
|
},
|
|
{
|
|
code: 450800,
|
|
name: "贵港市"
|
|
},
|
|
{
|
|
code: 450900,
|
|
name: "玉林市"
|
|
},
|
|
{
|
|
code: 451000,
|
|
name: "百色市"
|
|
}
|
|
|
|
],
|
|
showCityId: '',
|
|
searchTimer: null,
|
|
searchIndex: -1,
|
|
rightTapIdx: -1,
|
|
// 是否授权了定位权限
|
|
isAuthor: true,
|
|
dingweiCity: ''
|
|
|
|
}
|
|
},
|
|
onLoad: function() {
|
|
// 计算页面主体高度
|
|
graceJS.getRefs('guiPage', this, 0, (ref) => {
|
|
ref.getDomSize('guiPageBody', (e) => {
|
|
this.mainHeight = e.height - uni.upx2px(120);
|
|
this.pageLoading = false;
|
|
});
|
|
});
|
|
|
|
this.currentCity = uni.getStorageSync('city')
|
|
|
|
this.getLocation(res => {
|
|
this.getDWList(res.longitude, res.latitude);
|
|
})
|
|
},
|
|
methods: {
|
|
getDWList(longitude, latitude) {
|
|
const app = this
|
|
app.isLoading = true
|
|
Api.LonandLat({
|
|
longitude,
|
|
latitude
|
|
})
|
|
.then(result => {
|
|
this.dingweiCity = result.data.ads.city
|
|
})
|
|
},
|
|
getLocation(callback) {
|
|
const app = this
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: callback,
|
|
fail(res) {
|
|
app.$toast('获取定位失败，请点击按钮重新尝试定位')
|
|
app.isAuthor = false
|
|
}
|
|
})
|
|
},
|
|
onAuthorize() {
|
|
const app = this
|
|
// #ifdef MP
|
|
uni.openSetting({
|
|
success(res) {
|
|
if (res.authSetting['scope.userLocation']) {
|
|
app.isAuthor = true
|
|
setTimeout(() => {
|
|
// 获取用户坐标
|
|
app.getLocation((res) => {
|
|
app.getDWList(res.longitude, res.latitude);
|
|
})
|
|
}, 1000)
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
// 获取用户坐标
|
|
app.getLocation((res) => {
|
|
app.getDWList(res.longitude, res.latitude);
|
|
})
|
|
// #endif
|
|
},
|
|
fanhui() {
|
|
uni.navigateBack()
|
|
},
|
|
chooseCity2(){
|
|
uni.setStorageSync('city', this.dingweiCity);
|
|
|
|
uni.setStorageSync('is_locate',1)
|
|
uni.navigateBack()
|
|
},
|
|
// 选择
|
|
chooseCity: function(e) {
|
|
// 数据保存在 cityname 和 citycode
|
|
var cityname = e.currentTarget.dataset.cityname;
|
|
var citycode = e.currentTarget.dataset.citycode;
|
|
// uni.showToast({
|
|
// title: cityname + " [ " + citycode + " ]",
|
|
// icon: "none"
|
|
// });
|
|
|
|
|
|
this.currentCity = cityname;
|
|
uni.setStorageSync('city', cityname);
|
|
uni.setStorageSync('is_locate',1)
|
|
|
|
uni.navigateBack();
|
|
},
|
|
// 搜索
|
|
search: function(k) {
|
|
k = k.toLowerCase();
|
|
if (k == '') {
|
|
this.showCityId = 'pageTop';
|
|
return;
|
|
}
|
|
if (this.searchTimer != null) {
|
|
clearTimeout(this.searchTimer);
|
|
}
|
|
this.searchTimer = setTimeout(() => {
|
|
this.searchBase(k);
|
|
}, 500);
|
|
},
|
|
searchBase: function(k) {
|
|
this.searchIndex = -1;
|
|
for (var i in this.cityData) {
|
|
for (var ii = 0; ii < this.cityData[i].length; ii++) {
|
|
if (this.cityData[i][ii].name.indexOf(k) == 0 || this.cityData[i][ii].pinyin.indexOf(k) == 0) {
|
|
this.searchIndex = this.cityData[i][ii].code;
|
|
break;
|
|
}
|
|
}
|
|
if (this.searchIndex != -1) {
|
|
break;
|
|
}
|
|
}
|
|
if (this.searchIndex != -1) {
|
|
this.showCityId = 'gui-city-list-' + this.searchIndex;
|
|
}
|
|
},
|
|
// 点击切换
|
|
changAZ: function(e) {
|
|
this.rightTapIdx = -1;
|
|
var char = e.currentTarget.dataset.char;
|
|
this.showCityId = 'gui-city-AZ-' + char;
|
|
this.rightTapIdx = e.currentTarget.dataset.idx;
|
|
setTimeout(() => {
|
|
this.rightTapIdx = -1;
|
|
}, 2000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gui-h6 {
|
|
line-height: 66rpx;
|
|
}
|
|
|
|
.gui-city-search {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.gui-city-AZ {
|
|
font-weight: 700;
|
|
line-height: 88rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.gui-city-AZ-right {
|
|
width: 50rpx;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 80px;
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
.gui-city-AZ-right {
|
|
top: 110px;
|
|
}
|
|
|
|
/* #endif */
|
|
.gui-city-AZ-right-item {
|
|
line-height: 38rpx;
|
|
height: 38rpx;
|
|
width: 38rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 22rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.hotcity-item {
|
|
|
|
/* width: 210rpx; */
|
|
font-size: 26rpx;
|
|
/* height: 70rpx; */
|
|
padding: 10rpx 25rpx;
|
|
/* line-height: 70rpx; */
|
|
border-radius: 30rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
margin: 8rpx 5rpx;
|
|
background-color: #F6F7F8;
|
|
}
|
|
|
|
.city-item {
|
|
line-height: 88rpx;
|
|
height: 88rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
</style>
|