282 lines
9.0 KiB
Vue
282 lines
9.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="newLetter">
|
|
<text>黑龙江省</text>
|
|
<text>{{ address.cityName }}</text>
|
|
<text class="active">{{ address.districtName ? address.districtName : '请选择区域' }}</text>
|
|
</view>
|
|
|
|
<!-- 市级选择 -->
|
|
<scroll-view class="scrollLeft" scroll-y="true" :scroll-into-view="scrollTopId"
|
|
:scroll-top="scrollTop">
|
|
<view class="selection" :class="{active : address.cityCode == item.code}" v-for="(item,index) in cityList" :key="index" @click="bindCity(item.code, item.name)">
|
|
<view class="item_city">
|
|
{{ item.name }}<image class="checkImg" :class="{active : address.cityCode == item.code}" src="/static/icon/Check.png"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 区域选择 -->
|
|
<view class="region">
|
|
<scroll-view scroll-y="true" :scroll-into-view="scrollTopId" :scroll-top="scrollTop">
|
|
<view class="selection" :class="{active : address.provinceCode == item.code}" v-for="(item,index) in regiList" :key="index" @click="regionOpt(item.name)">
|
|
<view class="item_city">
|
|
{{ item.name }}<image class="checkImg" :class="{active : address.provinceCode == item.code}" src="/static/icon/Check.png"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
|
|
import { newCity, newidxCity } from '@/apis/interfaces/index'
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollTop : 0, // 置顶高度
|
|
scrollTopId : '', // 置顶id
|
|
winHeight : 0, //可视高度
|
|
location: {
|
|
defaultcity: '', // 定位区域名称
|
|
defaultregi: '' // 区域名称
|
|
},
|
|
address : {
|
|
cityName : "", // 市名称
|
|
districtName : "", // 区名称
|
|
cityCode : "", // 市编号
|
|
provinceCode : "" // 区编号
|
|
},
|
|
cityList : [], // 城市列表
|
|
regiList : [], //区域列表
|
|
qqMap: new QQMapWX({
|
|
key: '4KYBZ-LCAKF-QWOJN-NIDNZ-FZHLZ-2XFW7',
|
|
vm: this
|
|
}),
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
// 获取定位 - 使用腾讯地图sdk
|
|
uni.getLocation({
|
|
success: res => {
|
|
// 调用接口
|
|
this.qqMap.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: locatRes => {
|
|
if(res.message == "query ok"){
|
|
this.location.defaultcity = locatRes.result.ad_info.city
|
|
this.location.defaultregi = locatRes.result.ad_info.district
|
|
}else{
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon : 'none'
|
|
})
|
|
}
|
|
},
|
|
fail: res => {},
|
|
complete: res => {}
|
|
});
|
|
}
|
|
})
|
|
if(e.area == '' ) e.area_code = '0'
|
|
this.address.cityName = e.city
|
|
this.address.districtName = e.area
|
|
this.address.cityCode = e.city_code
|
|
this.address.provinceCode = e.area_code
|
|
|
|
// 获取全部城市
|
|
this.local();
|
|
},
|
|
onShow() {
|
|
},
|
|
methods:{
|
|
// 全部城市
|
|
local() {
|
|
newCity().then(res => {
|
|
this.cityList = res
|
|
// 获取区级列表
|
|
this.regilist(this.address.cityCode)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: err.message
|
|
})
|
|
})
|
|
},
|
|
|
|
// 地区列表
|
|
regilist(areaCode) {
|
|
newidxCity({
|
|
code: areaCode
|
|
}).then(res=>{
|
|
res.unshift({ code: '0', name:'全部'})
|
|
this.regiList = res
|
|
})
|
|
},
|
|
|
|
// 选择城市
|
|
bindCity(code, name) {
|
|
this.address.cityCode = code,
|
|
this.address.cityName = name
|
|
// 获取区级列表
|
|
this.regilist(code)
|
|
},
|
|
|
|
// 选择市区返回
|
|
regionOpt (name) {
|
|
let pages = getCurrentPages()
|
|
let nowPage = pages[ pages.length - 1] // 当前页页面实例
|
|
let prevPage = pages[ pages.length - 2 ] // 上一页页面实例
|
|
prevPage.$vm.address.cityName = name // 修改上一页data里面的brandName参数值为 item.name
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 省份
|
|
.newLetter {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background-color: #fff;
|
|
z-index: 1001;
|
|
font-size: 28rpx;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 2rpx;
|
|
background: #f1f1f1;
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 2rpx;
|
|
background: #f1f1f1;
|
|
}
|
|
text {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-right: 20rpx;
|
|
padding: 0 10rpx;
|
|
&.active {
|
|
color: #e83339;
|
|
}
|
|
&.active::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
bottom: -2rpx;
|
|
width: 100%;
|
|
height: 4rpx;
|
|
background: #e83339;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 市级选择
|
|
.scrollLeft {
|
|
position: fixed;
|
|
top: 90rpx;
|
|
height: calc(100% - 178rpx);
|
|
left: 0;
|
|
width: 260rpx;
|
|
z-index: 1001;
|
|
border-right: 1rpx solid #f1f1f1;
|
|
background-color: #fff;
|
|
.selection {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
.item_city {
|
|
position: relative;
|
|
display: flex;
|
|
height: 100rpx;
|
|
padding-left: 34rpx;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eaeaea;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
.checkImg {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 38rpx;
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
&.active .item_city {
|
|
color: #e83339;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 区域选择
|
|
.region {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 90rpx;
|
|
width: 100%;
|
|
height: calc(100% - 178rpx);
|
|
padding-left: 280rpx;
|
|
box-sizing: border-box;
|
|
background: #f5f5f5;
|
|
.selection {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
.item_city {
|
|
padding: 0 0 0 20rpx;
|
|
box-sizing: border-box;
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
height: 102rpx;
|
|
position: relative;
|
|
display: flex;
|
|
padding-left: 34rpx;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eaeaea;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
.checkImg {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 38rpx;
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
&.active .item_city {
|
|
color: #e83339;
|
|
}
|
|
}
|
|
}
|
|
</style>
|