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 @@
</div>
</h-header>
<section>
<div class="current-location">
<div class="img-box">
<img src="@/assets/homePage/location.png" alt="">
<section class="location-wrap">
<div class="current-location">
<div class="img-box">
<img src="@/assets/homePage/location.png" alt="">
</div>
<p>当前位置</p>
</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>
<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>
<!-- 省份 -->
<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>
</section>
</item>
</list-item>
</scroll>
<!-- 城市 -->
<scroll v-show="!province_flag" :pullUp="false" class="content-scroll">
<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 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">
<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>
</scroll>
<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>
</scroll>-->
</section>
</h-view>
</template>
<script>
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) {
console.log('定位。。。。', res.address)
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})
},
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) {
console.log('定位。。。。', res.address)
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.hlsHttp.post(url, param).then(function (res) {
console.log(res)
vm.lists = res.lists
})
},
switchCity () {
// 省份查询
selectLocation () {
let vm = this
let url = process.env.basePath + 'fnd_province_query'
let param = {}
vm.hlsHttp.post(url, param).then(function (res) {
console.log(res)
vm.lists = res.lists
vm.$nextTick(() => {
vm.scroll = new BScroll(vm.$refs.pro, {
click: true
})
})
})
},
switchCity () {
},
},
// 省份与城市切换
changeStyle (val) {
console.log(val)
if (val === 1) {
this.flag = false
this.province_flag = true
} else {
this.flag = true
}
},
// 省份与城市切换
changeStyle (val) {
console.log(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
this.hlsHttp.post(url, param).then(function (res) {
console.log(res)
// this.lists = res.lists
vm.cityList = res.lists
})
this.flag = !this.flag
this.province_flag = false
},
selectCity (val) {
this.hlsPopup.showConfirm({
title: '提示',
content: `是否切换到${val}？`,
onConfirm: (data) => {
console.log(data)
if (data) {
// window.sessionStorage.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
}
},
})
},
},
}
// 城市查询
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
this.hlsHttp.post(url, param).then(function (res) {
console.log(res)
// this.lists = res.lists
vm.cityList = res.lists
})
this.flag = !this.flag
this.province_flag = false
},
selectCity (val) {
this.hlsPopup.showConfirm({
title: '提示',
content: `是否切换到${val}？`,
onConfirm: (data) => {
console.log(data)
if (data) {
// window.sessionStorage.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 {
.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;
......@@ -192,86 +207,86 @@ export default {
}
}
.current-location {
height: 34px;
width: 100%;
display: flex;
flex-direction: rwo;
align-items: center;
height: 34px;
width: 100%;
display: flex;
flex-direction: rwo;
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);
.img-box {
width: 16px;
height: 16px;
margin-left: 17px;
background: rgba(0, 70, 156, 0.1);
img {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.select-location {
margin-left: 17px
}
p {
// width: 56px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
margin-left: 6px;
font-weight: 700
}
}
.select-location {
margin-left: 17px
}
p {
// width: 56px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
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;
font-family: PingFangSC-Semibold;
font-weight: 600;
font-size: 14px;
color: #383F45;
letter-spacing: 0;
}
.relocation {
font-family: PingFangSC-Regular;
font-size: 13px;
color: #00469C;
letter-spacing: 0;
div {
display: flex;
flex-direction: row;
align-items: center;
img {
width: 16px;
height: 16px;
margin-right: 6px
}
}
font-family: PingFangSC-Regular;
font-size: 13px;
color: #00469C;
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
margin-bottom: 0
}
.provinces {
background: #fff;
width: 100%;
background: #fff;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
border-bottom: 1px solid #fafafa;
p {
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;
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;
}
}
.styles {
font-family: PingFangSC-Semibold;
border-bottom: 2px solid blue;
color: #383F45;
font-weight: 600;
}
}
}
}
</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 @@
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