第一次提交
This commit is contained in:
gxwebsoft
187
sub_pages/user/base/address/address.vue
Normal file
187
sub_pages/user/base/address/address.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你所在地区是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
<!-- 给你推荐年龄相近的异性 -->
|
||||
</view>
|
||||
<view class="birthday">
|
||||
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
|
||||
:value="currentValue" @change="bindChange" class="picker-view">
|
||||
<picker-view-column id="provinces">
|
||||
<view :class="{current: index == currentValue[0]}" class="item" v-for="(item,index) in provinces" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view :class="{current: index == currentValue[1]}" class="item" v-for="(item,index) in citys" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view :class="{current: index == currentValue[2]}" class="item" v-for="(item,index) in areas" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cityData = []
|
||||
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk.min.js');
|
||||
var qqmapsdk;
|
||||
export default {
|
||||
data: function() {
|
||||
|
||||
return {
|
||||
title: 'picker-view',
|
||||
provinces: [],
|
||||
province: '',
|
||||
citys: [],
|
||||
city: '',
|
||||
areas: [],
|
||||
area: '',
|
||||
currentValue: [0, 0, 0],
|
||||
indicatorStyle: `height: 50px;color: #FFF;`
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
const app = this
|
||||
qqmapsdk = new QQMapWX({
|
||||
key: 'RDABZ-IF7AB-L4AUO-JHMX3-GBSGE-KIF53'
|
||||
});
|
||||
await this.loadData()
|
||||
// 获取定位信息
|
||||
uni.getLocation({
|
||||
success: (e)=>{
|
||||
|
||||
qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude: e.latitude,
|
||||
longitude: e.longitude
|
||||
},
|
||||
success: (res)=>{
|
||||
const {province, city, district} = res.result.address_component
|
||||
console.log(province);
|
||||
const provinceIndex = app.provinces.findIndex(item=> item.label == province)
|
||||
app.citys = app.filterData(cityData[provinceIndex].children)
|
||||
const cityIndex = app.citys.findIndex(item=> item.label == city)
|
||||
app.areas = app.filterData(cityData[provinceIndex].children[cityIndex].children)
|
||||
const areaIndex = app.areas.findIndex(item=> item.label == district)
|
||||
app.$nextTick(()=>{
|
||||
app.currentValue = [provinceIndex,cityIndex, areaIndex]
|
||||
app.province = app.provinces[app.currentValue[0]]
|
||||
app.city = app.citys[app.currentValue[1]]
|
||||
app.area = app.areas[app.currentValue[2]]
|
||||
})
|
||||
},
|
||||
fail: (error)=> {
|
||||
console.log('error: ',error);
|
||||
}
|
||||
})
|
||||
console.log(e);
|
||||
},
|
||||
fail() {
|
||||
app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
|
||||
app.isAuthor = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
formatCityData() {
|
||||
const currentValue = this.currentValue
|
||||
const provinceList = this.filterData(cityData)
|
||||
|
||||
const cityList = this.filterData(cityData[currentValue[0]].children)
|
||||
const areaList = this.filterData(cityData[currentValue[0]].children[currentValue[1]].children)
|
||||
|
||||
const provice = provinceList[currentValue[0]]
|
||||
const city = cityList[currentValue[1]]
|
||||
const area = areaList[currentValue[2]]
|
||||
this.provinces = provinceList
|
||||
this.citys = cityList
|
||||
this.areas = areaList
|
||||
this.province = provice
|
||||
this.city = city
|
||||
this.area = area
|
||||
},
|
||||
bindChange: function(e) {
|
||||
|
||||
const val = e.detail.value;
|
||||
let {
|
||||
currentValue
|
||||
} = this
|
||||
console.log('val:', val)
|
||||
console.log('currentValue:', currentValue)
|
||||
if (val[0] !== currentValue[0]) {
|
||||
currentValue = [val[0], 0, 0]
|
||||
this.currentValue = currentValue
|
||||
} else if (val[1] !== currentValue[1]) {
|
||||
currentValue = [val[0], val[1], 0]
|
||||
this.currentValue = currentValue
|
||||
} else if (val[2] !== currentValue[2]) {
|
||||
currentValue = val
|
||||
this.currentValue = currentValue
|
||||
}
|
||||
this.formatCityData()
|
||||
|
||||
this.province = this.provinces[val[0]]
|
||||
this.city = this.citys[val[1]]
|
||||
this.area = this.areas[val[2]]
|
||||
},
|
||||
filterData(arr = []) {
|
||||
return arr.map(item=>{
|
||||
return {
|
||||
label: item.label,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.province = this.province
|
||||
userBase.city = this.city
|
||||
userBase.region = this.area
|
||||
userBase.address = `${this.province} ${this.city} ${this.area}`
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/yearpay/yearpay')
|
||||
},
|
||||
loadData() {
|
||||
return new Promise((reso,rej) => {
|
||||
uni.request({
|
||||
url: 'https://file.wsdns.cn/json/city.js',
|
||||
success: (res) => {
|
||||
cityData = res.data
|
||||
this.formatCityData()
|
||||
return reso()
|
||||
},
|
||||
fail() {
|
||||
return rej()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
|
||||
.birthday {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user