<!-- * @Descrip""/>User Settings Edit * @Author: your name * @Date: 2019-10-11 09:39:51 * @LastEditTime: 2019-11-25 10:01:44 * @LastEditors: Please set LastEditors --> <template> <h-view id="location" class="public-style" title="定位"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <span>选择地区</span> </div> </h-header> <section> <section class="location-wrap"> <div class="current-location"> <div class="img-box"> <img src="@/assets/homePage/locationImage.png" alt=""> </div> <p>当前位置</p> </div> <list-item> <item :proportion="[5,2]"> <section slot="name" class="place">{{ places }}</section> <section slot="content" class="relocation"> <div> <img src="@/assets/homePage/relocation.png" alt=""> <p @click="relocation">重新定位</p> </div> </section> </item> </list-item> <div class="current-location"> <p class="select-location" @click="switchCity">选择位置</p> </div> <div class="provinces"> <p :class="{styles:!flag}" @click="changeStyle(1)">{{ province }}</p> <p :class="{styles:flag}" @click="changeStyle(2)">{{ city }}</p> </div> </section> <!-- 省份 --> <section v-show="province_flag" ref="pro" class="pro-wrapper"> <div class="pro-content"> <list-item :item-height="40"> <item v-for="(item,index) in lists" :key="index" :proportion="[5,2]"> <section slot="name" @click="selectProvince(item)">{{ item.province_name }}</section> </item> </list-item> </div> </section> <!-- 城市 --> <section v-show="!province_flag" ref="city" class="pro-wrapper"> <div class="city-content"> <list-item :item-height="40"> <item v-for="(item,index) in cityList" :key="index" :proportion="[5,2]"> <section slot="name" @click="selectCity(item.city_name)">{{ item.city_name }}</section> </item> </list-item> </div> </section> </section></h-view> </template> <script> import BScroll from 'better-scroll' export default { name: 'Location', data () { return { flag: false, province_flag: true, province: '请选择省', city: '请选择市', places: '', lists: [], cityList: [], } }, computed: {}, watch: {}, created () { // 判断是否是初次进入,不是就显示手动绑定的位置 if (window.localStorage.getItem('province')) { this.places = window.localStorage.getItem('province') + '-' + window.localStorage.getItem('city') } else { this.places = this.$route.params.province + '-' + this.$route.params.city } this.selectLocation() }, methods: { // 重新定位到当前位置 relocation () { let vm = this var geolocation = new BMap.Geolocation() geolocation.getCurrentPosition(function (res) { // debugger if (this.getStatus() === 0) { window.localStorage.setItem('province', res.address.province) window.localStorage.setItem('city', res.address.city) vm.places = window.localStorage.getItem('province') + '-' + window.localStorage.getItem('city') vm.province = '请选择省' vm.city = '请选择市' vm.flag = false vm.province_flag = true } }, {enableHighAccuracy: true}) }, // 省份查询 selectLocation () { let vm = this let url = process.env.basePath + 'fnd_province_query' let param = {} vm.hlsPopup.showLoading('请稍后') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() vm.lists = res.lists vm.$nextTick(() => { vm.scroll = new BScroll(vm.$refs.pro, { click: true, }) }) }) }, switchCity () { }, // 省份与城市切换 changeStyle (val) { if (val === 1) { this.flag = false this.province_flag = true } else { this.flag = true } }, // 城市查询 selectProvince (val) { this.province = val.province_name let url = process.env.basePath + 'fnd_city_query' let param = { province_id: val.province_id, } let vm = this // vm.hlsPopus.showLoading('请稍后') this.hlsHttp.post(url, param).then(function (res) { console.log(res) // vm.hlsPopup.hideLoading() vm.cityList = res.lists vm.$nextTick(() => { vm.cityScroll = new BScroll(vm.$refs.city, { click: true, }) }) }) this.flag = !this.flag this.province_flag = false }, selectCity (val) { this.hlsPopup.showConfirm({ title: '提示', content: `是否切换到${val}?`, onConfirm: (data) => { if (data) { // window.localStorage.setItem('bp_class', item.bp_class) window.localStorage.setItem('province', this.province) window.localStorage.setItem('city', val) this.places = this.province + '-' + val this.city = val } }, }) }, }, } </script> <style lang='less' scoped> #location { .location-wrap{ position: relative; overflow: hidden; } .pro-wrapper{ position: absolute; top: 205px; bottom: 0; left: 0; width: 100%; overflow: hidden; } .h-header-btn { img { width: 16px; height: 16px; margin-left: 4px; } span { font-family: PingFangSC-Semibold; margin-left: 16px; font-size: 17px; letter-spacing: 0.61px; line-height: 24px; } } .current-location { height: 34px; width: 100%; display: flex; align-items: center; background: rgba(0, 70, 156, 0.1); .img-box { width: 16px; height: 16px; margin-left: 17px; img { width: 100%; height: 100%; } } .select-location { margin-left: 17px } p { // width: 56px; font-family: PingFangSC-Semibold; font-size: 14px; color: @headerColor; letter-spacing: 0; margin-left: 6px; font-weight: 700 } } .place { font-family: PingFangSC-Semibold; font-weight: 600; font-size: 14px; color: #383F45; letter-spacing: 0; } .relocation { font-family: PingFangSC-Regular; font-size: 13px; color: @headerColor; letter-spacing: 0; div { display: flex; flex-direction: row; align-items: center; img { width: 16px; height: 16px; margin-right: 6px } } } .hls-list-item { margin-bottom: 0 } .provinces { background: #fff; width: 100%; height: 40px; display: flex; flex-direction: row; border-bottom: 1px solid #fafafa; p { height: 40px; line-height: 40px; margin-left: 15px; font-family: PingFangSC-Semibold; font-size: 14px; color: rgba(56,63,69,0.60); letter-spacing: 0.5px; } .styles { font-family: PingFangSC-Semibold; border-bottom: 2px solid blue; color: #383F45; font-weight: 600; } } } </style>