274 lines
7.1 KiB
Vue
274 lines
7.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="pack-center pages-hint showActive" v-if="showDt">
|
||
<image src="/static/img/null_icon.png"></image>
|
||
<view>查看附近营业厅，需要获取您的地理位置</view>
|
||
<!-- <button class="location-btn" size="mini" open-type="openSetting">
|
||
开启定位服务
|
||
</button> -->
|
||
<view class="showActive-go" @tap="showTap">获取</view>
|
||
</view>
|
||
<view class="showDt" v-else>
|
||
<view class="top">
|
||
<view class="top-left nowrap">{{locationData.address}}</view>
|
||
<view class="top-picker">
|
||
<picker @change="screenOrders" :value="ordersIndex" :range-key="'name'" :range="ordersWay">
|
||
{{ ordersWay[ordersIndex].name }}
|
||
</picker>
|
||
<image class="profigReport-module-icon" src="/static/icon/arrow_down.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="list" v-if="cityList.length > 0">
|
||
<view class="item" v-for="(item, index) in cityList" :key="index">
|
||
<image :src="item.cover" mode="aspectFill" class="item-logo"></image>
|
||
<view class="item-cont">
|
||
<view class="item-name nowrap">{{item.title}}</view>
|
||
<view class="item-address nowrap">{{item.address}}</view>
|
||
<view class="item-distance nowrap">
|
||
<view class="item-distance-left">{{item.distance}}</view>
|
||
<view class="item-distance-go" @tap="siteMap(item.latitude, item.longitude)">去导航</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 暂无内容 -->
|
||
<view class="pack-center pages-hint" v-else>
|
||
<image src="/static/img/null_icon.png"></image>
|
||
<view>抱歉，目前暂无内容~</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { hallsIndex } from '@/apis/interfaces/index'
|
||
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showDt : false,
|
||
latitude : '',
|
||
longitude : '',
|
||
Distance : '',
|
||
locationData : '',
|
||
cityList : [], // 营业厅列表
|
||
qqMap: new QQMapWX({
|
||
key: '4KYBZ-LCAKF-QWOJN-NIDNZ-FZHLZ-2XFW7',
|
||
vm: this
|
||
}),
|
||
ordersIndex : 0,
|
||
ordersWay : [
|
||
{value: '', name: "全部"},
|
||
{value: '1000', name: "小于1000"},
|
||
{value: '2000', name: "小于2000"}
|
||
],
|
||
page : 1, //分页
|
||
lodingStats : false //加载状态
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if(this.latitude == '') {
|
||
this.showDt = true
|
||
}
|
||
|
||
},
|
||
onShow() {},
|
||
methods:{
|
||
showTap() {
|
||
this.showDt = false
|
||
// 获取定位 - 使用腾讯地图sdk
|
||
uni.getLocation({
|
||
success: res => {
|
||
// 调用接口
|
||
this.qqMap.reverseGeocoder({
|
||
location: {
|
||
latitude: res.latitude,
|
||
longitude: res.longitude
|
||
},
|
||
success: locatRes => {
|
||
this.latitude = locatRes.result.location.lat
|
||
this.longitude = locatRes.result.location.lng
|
||
|
||
// 获取营业厅列表
|
||
this.regilist(this.latitude, this.longitude);
|
||
},
|
||
fail: res => {},
|
||
complete: res => {}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 营业厅列表
|
||
regilist(page) {
|
||
hallsIndex({
|
||
user_lat: this.latitude,
|
||
user_lng: this.longitude,
|
||
distance: this.Distance,
|
||
page : page || ''
|
||
}).then(res=>{
|
||
let newStores = this.cityList,
|
||
newData = []
|
||
if(page == 1 || page == undefined) newStores = []
|
||
newData = newStores.concat(res.halls.data)
|
||
|
||
for(let val in res.halls.data){
|
||
let distance = res.halls.data[val].distance
|
||
if (distance > 1000) {
|
||
distance = parseFloat( distance / 1000).toFixed(2) + "km";
|
||
} else {
|
||
distance = parseFloat( distance).toFixed(2) + "m";
|
||
}
|
||
res.halls.data[val].distance = distance
|
||
}
|
||
|
||
this.cityList = newData
|
||
this.locationData = res.location
|
||
this.page = res.halls.page
|
||
this.lodingStats = false
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
},
|
||
|
||
screenOrders(e) {
|
||
this.ordersIndex = e.detail.value
|
||
this.Distance = Number(this.ordersWay[this.ordersIndex].value)
|
||
|
||
// 营业厅列表
|
||
this.regilist();
|
||
},
|
||
|
||
// 页面相关事件处理函数--监听用户下拉动作
|
||
onPullDownRefresh() {
|
||
// 营业厅列表
|
||
this.regilist();
|
||
},
|
||
|
||
// 上拉加载
|
||
onReachBottom(){
|
||
this.lodingStats = true
|
||
let pageNumber = this.page.current
|
||
if(this.page.has_more){
|
||
pageNumber++
|
||
// 营业厅列表
|
||
this.regilist(pageNumber);
|
||
}
|
||
},
|
||
|
||
// 导航
|
||
siteMap(lat, long){
|
||
let key = '34ea3d2958aee3ffc154738551a976f9',//高德地图key
|
||
latitude = parseFloat(lat),
|
||
longitude = parseFloat(long)
|
||
|
||
window.location.href = "http://uri.amap.com/marker?position="+ longitude +","+latitude +"&name="+ name +"&coordinate=gaode&callnative=1";
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #f0f4fe;
|
||
}
|
||
.showActive {
|
||
z-index: 1;
|
||
}
|
||
|
||
.showActive-go {
|
||
display: inline-block;
|
||
background-color: #666c9f;
|
||
color: #ffffff;
|
||
border-radius: 10rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 60rpx;
|
||
font-size: 28rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.top {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
}
|
||
.top-left {
|
||
flex: 1;
|
||
margin-right: 30rpx;
|
||
line-height: 64rpx;
|
||
}
|
||
.top-picker {
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
line-height: 64rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
}
|
||
.profigReport-module-picker {
|
||
display: flex;
|
||
color: #797979;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.profigReport-module-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin: 20rpx 0 0 10rpx;
|
||
}
|
||
|
||
.list {
|
||
padding: 0 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.item {
|
||
background-color: #ffffff;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 30rpx;
|
||
position: relative;
|
||
}
|
||
.item-logo {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
.item-cont {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 30rpx 30rpx 30rpx 240rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.item-name {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
}
|
||
.item-address {
|
||
margin: 10rpx 0 30rpx;
|
||
}
|
||
.item-distance {
|
||
display: flex;
|
||
}
|
||
.item-distance-left {
|
||
flex: 1;
|
||
line-height: 58rpx;
|
||
}
|
||
.item-distance-go {
|
||
background-color: #666c9f;
|
||
color: #ffffff;
|
||
border-radius: 10rpx;
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
</style>
|