<template>
|
<div class="warp">
|
<view class="listBox" v-for="item,i in listBox" @click="todoBasMap(item)">
|
<view class="left">
|
<h4>{{ item.deptName }}</h4>
|
<p>{{ item.position }}</p>
|
</view>
|
<view class="right">
|
<img :src="`${onlineurl}/appimg/image/司机端首页/形状 1.jpg`" alt="" style="width: 30rpx;height: 30rpx;">
|
<span>{{ item.distance }}</span>
|
</view>
|
</view>
|
</div>
|
</template>
|
|
<script>
|
import { onlineurl } from '@/api/request.js'
|
import {BaseUrl} from '@/api/request.js'
|
export default {
|
data() {
|
return {
|
property: 'value',
|
listBox:[],
|
longitude:'',
|
latitude:'',
|
|
};
|
},
|
onload(){
|
|
|
},
|
onShow(){
|
this.init();
|
this.getLocation();
|
},
|
computed:{
|
userId() {
|
return uni.getStorageSync('userId');
|
}
|
},
|
methods: {
|
init(){
|
this.$reqGet('getCoalFiled',
|
{userId:uni.getStorageSync('userId'),
|
latitude: '38.04606544104117',
|
longitude:'114.48735479816793'
|
}
|
).then((result) => {
|
console.log(result,'result')
|
this.listBox = result.data;
|
})
|
|
// uni.request({
|
// url: BaseUrl + '/wrzs/tmtaskcoal/getDepts' + '/' + uni.getStorageSync('userId') ,
|
// method: 'GET',
|
// header: {
|
// 'Authorization': 'Basic c29jaWFsOnNvY2lhbA==', //app:app
|
// 'content-type': 'application/x-www-form-urlencoded',
|
// 'CLIENT_TOC': 'Y',
|
// 'isToken': 'false'
|
// },
|
// success: res => {
|
// uni.hideLoading();
|
// console.log(res,'ressed');
|
// this.listBox = res.data.data;
|
// },
|
// fail: err => {
|
// console.log('错误', err)
|
// uni.hideLoading()
|
// uni.showToast({
|
// icon: 'none',
|
// title: '服务器错误'
|
// })
|
// }
|
// })
|
},
|
getLocation(){
|
var _this = this
|
let QQMapWX = require('../../../utils/qqmap-wx-jssdk');
|
let qqmapsdk = new QQMapWX({
|
key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 必填
|
});
|
//使用 uni.getLocation获取用户所在经纬度
|
uni.getLocation({
|
type: 'gcj02',
|
geocode: true,
|
isHighAccuracy: true,
|
success: (res) => {
|
console.log("获取经纬度成功");
|
// const re = _this.$mapChange.wgs84Togcj02(res.longitude, res.latitude)
|
// console.log(re)
|
_this.longitude = res.longitude
|
_this.latitude = res.latitude
|
},
|
fail: () => {
|
console.log("获取经纬度失败");
|
},
|
complete: () => {
|
// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
|
qqmapsdk.reverseGeocoder({
|
location: {
|
latitude: _this.latitude,
|
longitude: _this.longitude
|
},
|
success: function(res) {
|
console.log("解析地址成功", res);
|
console.log("当前地址：", res.result.address);
|
//保存缓存
|
uni.setStorage({
|
key: 'local',
|
data: res.result.address,
|
success() {
|
console.log("用户地址信息已缓存")
|
}
|
})
|
_this.$reqGet('getCoalFiled',
|
{userId:uni.getStorageSync('userId'),
|
latitude:_this.latitude ? String(_this.latitude) : '38.04606544104117',
|
longitude:_this.longitude? String(_this.longitude) :'114.48735479816793'
|
}
|
).then((result) => {
|
console.log(result,'result')
|
_this.listBox = result.data;
|
})
|
},
|
fail: function(res) {
|
uni.showToast({
|
title: '定位失败',
|
duration: 2000,
|
icon: "none"
|
})
|
console.log(res);
|
},
|
complete: function(res) { //无论成功失败都会执行
|
console.log('获取定位信息')
|
return
|
uni.openLocation({
|
latitude: _this.latitude,
|
longitude: _this.longitude,
|
success: function() {
|
console.log('success');
|
}
|
});
|
}
|
})
|
|
}
|
})
|
},
|
todoBasMap(item){
|
uni.navigateTo({
|
url: `/pages/driver-page/driver-index/bill-of-lading-details/BaseMapDetail/index?latitude=${item.latitude}&longitude=${item.longitude}&name=${item.position}&brief=${item.brief}`
|
});
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
.warp{
|
width: 100%;
|
height: calc(100vh - 45px);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background-color: #F4F4F4;
|
overflow-y: auto;
|
.listBox{
|
width: 92%;
|
height: 179rpx;
|
background-color: #fff;
|
margin-top: 20rpx;
|
border-radius: 6rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
}
|
.left{
|
margin-left: 30rpx;
|
h4{
|
font-weight: bold;
|
|
}
|
p{
|
font-size: 24rpx;
|
color: #676767;
|
}
|
}
|
.right{
|
margin-right: 30rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
span{
|
font-size: 24rpx;
|
color: #494949;
|
}
|
}
|
}
|
|
|
</style>
|
