Skip to content

H
hls-xcmg-vue-app
Commit 79eda834 authored by 李晓兵's avatar 李晓兵
Browse files
Options

'修改定位样式'

parent a0cf7120
Hide whitespace changes
Inline Side-by-side
Showing with 254 additions and 213 deletions
src/pages/home/location.vue
View file @ 79eda834
...@@ -14,168 +14,183 @@ ...@@ -14,168 +14,183 @@
</div> </div>
</h-header> </h-header>
<section> <section>
<div class="current-location"> <section class="location-wrap">
<div class="img-box"> <div class="current-location">
<img src="@/assets/homePage/location.png" alt=""> <div class="img-box">
<img src="@/assets/homePage/location.png" alt="">
</div>
<p>当前位置</p>
</div> </div>
<p>当前位置</p> <list-item>
</div> <item :proportion="[5,2]">
<section slot="name" class="place">{{ places }}</section>
<list-item> <section slot="content" class="relocation">
<item :proportion="[5,2]"> <div>
<section slot="name" class="place">{{ places }}</section> <img src="@/assets/homePage/relocation.png" alt="">
<section slot="content" class="relocation"> <p @click="relocation">重新定位</p>
<div> </div>
<img src="@/assets/homePage/relocation.png" alt="">
<p @click="relocation">重新定位</p>
</div>
</section> </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>
<!-- 省份 -->
<scroll v-show="province_flag" :pullUp="false" class="content-scroll">
<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> </item>
</list-item> </list-item>
</scroll> <div class="current-location">
<p class="select-location" @click="switchCity">选择位置</p>
<!-- 城市 --> </div>
<scroll v-show="!province_flag" :pullUp="false" class="content-scroll"> <div class="provinces">
<p :class="{styles:!flag}" @click="changeStyle(1)">{{ province }}</p>
<p :class="{styles:flag}" @click="changeStyle(2)">{{ city }}</p>
</div>
</section>
<!-- 省份 -->
<section 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>
<!-- &lt;!&ndash; 城市 &ndash;&gt;
<scroll v-show="!province_flag" :pullUp="false" class="content-scroll">
<list-item :item-height="40"> <list-item :item-height="40">
<item v-for="(item,index) in cityList" :key="index" :proportion="[5,2]"> <item v-for="(item,index) in cityList" :key="index" :proportion="[5,2]">
<section slot="name" @click="selectCity(item.city_name)">{{ item.city_name }}</section> <section slot="name" @click="selectCity(item.city_name)">{{ item.city_name }}</section>
</item> </item>
</list-item> </list-item>
</scroll> </scroll>-->
</section> </section>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { import BScroll from 'better-scroll'
name: 'Location', export default {
data () { name: 'Location',
return { data () {
flag: false, return {
province_flag: true, flag: false,
province: '请选择省', province_flag: true,
city: '请选择市', province: '请选择省',
places: '', city: '请选择市',
lists: [], places: '',
cityList: [], lists: [],
} cityList: [],
}, }
computed: {}, },
watch: {}, computed: {},
created () { watch: {},
// 判断是否是初次进入，不是就显示手动绑定的位置 created () {
if (window.localStorage.getItem('province')) { // 判断是否是初次进入，不是就显示手动绑定的位置
this.places = window.localStorage.getItem('province') + '-' + window.localStorage.getItem('city') if (window.localStorage.getItem('province')) {
} else { this.places = window.localStorage.getItem('province') + '-' + window.localStorage.getItem('city')
this.places = this.$route.params.province + '-' + this.$route.params.city } else {
} this.places = this.$route.params.province + '-' + this.$route.params.city
this.selectLocation() }
}, this.selectLocation()
methods: },
{ methods:
// 重新定位到当前位置 {
relocation () { // 重新定位到当前位置
let vm = this relocation () {
var geolocation = new BMap.Geolocation() let vm = this
geolocation.getCurrentPosition(function (res) { var geolocation = new BMap.Geolocation()
// debugger geolocation.getCurrentPosition(function (res) {
if (this.getStatus() === 0) { // debugger
console.log('定位。。。。', res.address) if (this.getStatus() === 0) {
window.localStorage.setItem('province', res.address.province) console.log('定位。。。。', res.address)
window.localStorage.setItem('city', res.address.city) window.localStorage.setItem('province', res.address.province)
vm.places = window.localStorage.getItem('province') + '-' + window.localStorage.getItem('city') window.localStorage.setItem('city', res.address.city)
vm.province = '请选择省' vm.places = window.localStorage.getItem('province') + '-' + window.localStorage.getItem('city')
vm.city = '请选择市' vm.province = '请选择省'
vm.flag = false vm.city = '请选择市'
vm.province_flag = true vm.flag = false
} vm.province_flag = true
}, {enableHighAccuracy: true}) }
}, }, {enableHighAccuracy: true})
},
// 省份查询 // 省份查询
selectLocation () { selectLocation () {
let vm = this let vm = this
let url = process.env.basePath + 'fnd_province_query' let url = process.env.basePath + 'fnd_province_query'
let param = {} let param = {}
vm.hlsHttp.post(url, param).then(function (res) { vm.hlsHttp.post(url, param).then(function (res) {
console.log(res) console.log(res)
vm.lists = res.lists vm.lists = res.lists
}) vm.$nextTick(() => {
}, vm.scroll = new BScroll(vm.$refs.pro, {
switchCity () { click: true
})
})
})
},
switchCity () {
}, },
// 省份与城市切换 // 省份与城市切换
changeStyle (val) { changeStyle (val) {
console.log(val) console.log(val)
if (val === 1) { if (val === 1) {
this.flag = false this.flag = false
this.province_flag = true this.province_flag = true
} else { } else {
this.flag = true this.flag = true
} }
}, },
// 城市查询 // 城市查询
selectProvince (val) { selectProvince (val) {
this.province = val.province_name this.province = val.province_name
let url = process.env.basePath + 'fnd_city_query' let url = process.env.basePath + 'fnd_city_query'
let param = { let param = {
province_id: val.province_id, province_id: val.province_id,
} }
let vm = this let vm = this
this.hlsHttp.post(url, param).then(function (res) { this.hlsHttp.post(url, param).then(function (res) {
console.log(res) console.log(res)
// this.lists = res.lists // this.lists = res.lists
vm.cityList = res.lists vm.cityList = res.lists
}) })
this.flag = !this.flag this.flag = !this.flag
this.province_flag = false this.province_flag = false
}, },
selectCity (val) { selectCity (val) {
this.hlsPopup.showConfirm({ this.hlsPopup.showConfirm({
title: '提示', title: '提示',
content: `是否切换到${val}？`, content: `是否切换到${val}？`,
onConfirm: (data) => { onConfirm: (data) => {
console.log(data) console.log(data)
if (data) { if (data) {
// window.sessionStorage.setItem('bp_class', item.bp_class) // window.sessionStorage.setItem('bp_class', item.bp_class)
window.localStorage.setItem('province', this.province) window.localStorage.setItem('province', this.province)
window.localStorage.setItem('city', val) window.localStorage.setItem('city', val)
this.places = this.province + '-' + val this.places = this.province + '-' + val
this.city = val this.city = val
} }
}, },
}) })
}, },
}, },
} }
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>
#location { #location {
.location-wrap{
position: relative;
overflow: hidden;
}
.pro-wrapper{
position: absolute;
top: 205px;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.h-header-btn { .h-header-btn {
img { img {
width: 16px; width: 16px;
...@@ -192,86 +207,86 @@ export default { ...@@ -192,86 +207,86 @@ export default {
} }
} }
.current-location { .current-location {
height: 34px; height: 34px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: rwo; flex-direction: rwo;
align-items: center; align-items: center;
background: rgba(0, 70, 156, 0.1);
.img-box {
width: 16px;
height: 16px;
margin-left: 17px;
background: rgba(0, 70, 156, 0.1); background: rgba(0, 70, 156, 0.1);
.img-box { img {
width: 16px; width: 100%;
height: 16px; height: 100%;
margin-left: 17px;
background: rgba(0, 70, 156, 0.1);
img {
width: 100%;
height: 100%;
}
} }
.select-location {
margin-left: 17px }
} .select-location {
p { margin-left: 17px
// width: 56px; }
font-family: PingFangSC-Semibold; p {
font-size: 14px; // width: 56px;
color: #00469C; font-family: PingFangSC-Semibold;
letter-spacing: 0; font-size: 14px;
margin-left: 6px; color: #00469C;
font-weight: 700 letter-spacing: 0;
} margin-left: 6px;
font-weight: 700
}
} }
.place { .place {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #383F45; color: #383F45;
letter-spacing: 0; letter-spacing: 0;
} }
.relocation { .relocation {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: #00469C; color: #00469C;
letter-spacing: 0; letter-spacing: 0;
div { div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 6px margin-right: 6px
} }
} }
} }
.hls-list-item { .hls-list-item {
margin-bottom: 0 margin-bottom: 0
} }
.provinces { .provinces {
background: #fff; background: #fff;
width: 100%; width: 100%;
height: 40px;
display: flex;
flex-direction: row;
border-bottom: 1px solid #fafafa;
p {
height: 40px; height: 40px;
display: flex; line-height: 40px;
flex-direction: row; margin-left: 15px;
border-bottom: 1px solid #fafafa; font-family: PingFangSC-Semibold;
p { font-size: 14px;
height: 40px; color: rgba(56,63,69,0.60);
line-height: 40px; letter-spacing: 0.5px;
margin-left: 15px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: rgba(56,63,69,0.60);
letter-spacing: 0.5px;
} }
.styles { .styles {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
border-bottom: 2px solid blue; border-bottom: 2px solid blue;
color: #383F45; color: #383F45;
font-weight: 600; font-weight: 600;
} }
} }
} }
</style> </style>
src/styles/platform-ios.less 0 → 100644
View file @ 79eda834
.platform-ios {
.pro-wrapper{
top:225px !important;
}
}
src/styles/platform-iosx.less 0 → 100644
View file @ 79eda834
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios{
.pro-wrapper{
top:245px !important;
}
}
}
src/styles/platform-iosxr.less 0 → 100644
View file @ 79eda834
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px){
.platform-ios{
.pro-wrapper{
top:245px !important;
}
}
}
src/styles/public-style.less
View file @ 79eda834
...@@ -6,3 +6,7 @@ ...@@ -6,3 +6,7 @@
background-color: @theme-color background-color: @theme-color
} }
} }
@import "platform-ios";
@import "platform-iosx";
@import "platform-iosxr";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment