[本时生活h5端]
This commit is contained in:
281
pages/switchcity/switchcity.vue
Normal file
281
pages/switchcity/switchcity.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user